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内 容 简介 


本 书 从 炙手可热 的 HTML5 的 基础 知识 入 手 ， 重 点 前 述 目前 应 用 最 
广 的 泻 染 引擎 项 目 一 一 WebKit。 不 仅 着 眼 于 系统 描述 WebKit 内 部 泻 染 
HTML 网 页 的 原理 ， 并 基于 Chromium 的 实现 ， 前 明 泻 染 引 擎 如 何 高 效 
地 利用 硬件 和 最 新 技术 ， 而 且 试图 通过 对 原理 的 剖析 ， 向 读者 传授 实 
现 高 性 能 Web 前 端 开 发 所 需 的 宝贵 经 验 。 


全 书 首先 从 总 体 上 描述 WebKit 架 构 和 组 成 ， 而 后 涵盖 web 前 端 和 
所 有 与 之 相关 的 重要 技术 ， 包 括 网 络 、 资 源 加 载 、HIML 和 CSS 解 
析 、 泻 染 树 、 布 局 、 硬 件 加 速 、JavaScript 引 擎 、 多 媒体 、 移 动 支持 、 
插件 机 制 、 安 全 机 制 、 调 试 和 最 新 的 Web 平台 等 。 对 于 每 一 项 技术 ， 
在 介绍 基本 含义 之 上 ， 详 细 分 析 WebKit 内 部 的 工作 原理 ， 进 而 从 实践 
角度 道 出 由 此 带 来 的 web 前 端 开发 启示 。 
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随 着 HTML5 的 快速 发 展 和 网 络 时 代 的 到 来 ，Web 的 接 入 口 浏 
览 器 越 来 越 重 要 ， 而 作为 浏览 器 的 内 核 泻 染 引 擎 也 变 成 了 热门 话 
题 。 自 笔者 接触 HTML5 技 术 和 浏览 器 以 来 ， 深 深 地 被 这 一 包含 众多 非 
凡 技 术 的 新 领域 所 吸引 ， 并 由 此 产生 了 很 多 疑问 ， 为 此 ， 我 开始 了 漫 
长 的 学 习 和 研究 WebKit (及 Blink) 泻 染 引 擎 和 Chromium 浏 览 器 的 征 
程 。 虽 然 webKit 项 目 本 身 非 常 复杂 ， 但 是 其 简单 的 代码 结构 、 清 晰 的 
逻辑 给 我 留 下 了 深刻 的 印象 ， 因 为 在 这 些 复杂 技术 的 背后 ， 竟 然 也 可 
以 使 用 良好 的 设计 去 解决 技术 的 复杂 性 。 而 基于 WebKit 的 Chromium 项 
目 更 是 将 众多 大 胆 的 新 技术 引入 到 了 浏览 器 领域 ,让 人 耳目 一 新 。 


WebKit 是 一 个 非常 成 功 的 项 目 ， 它 不 仅仅 是 个 泻 染 引擎 ， 而 且 成 
功 地 推动 了 网 络 的 发 展 。 基 于 WebKit 泻 染 引 警 的 浏览 器 项 目 
Chromium ， 更 是 成 为 率先 支持 HIML5 功 能 和 创新 新 功能 的 标杆 。 要 
完整 理解 一 个 Web 泻 染 引 擎 和 浏览 器 并 不 容易 ， 因 为 它们 的 确 包 含 了 
众多 复杂 的 功能 。 据 笔者 的 统计 ，WebKit 项 目 和 Chromium 项 目 (FE 
括 该 项 目 依赖 的 众多 第 三 方 项 目 ) 的 代码 量 都 在 500 万 行 以 上 ， 而 这 些 
代码 很 多 并 没有 完善 的 文档 ， 所 以 理解 这 些 技术 背后 的 工作 原理 还 是 
非常 困难 的 。 


随 着 学 习 的 深入 ， 笔 者 发 现 目前 对 于 整个 泻 染 引擎 的 分 析 和 文档 
化 还 处 于 一 个 缺失 的 状态 。 同 时 ， 因 为 泻 染 引擎 和 浏览 器 包含 了 太 多 
的 技术 ， 让 人 有 点 应 接 不 暇 的 感觉 。 昌 然 WebKit 项 目 代 码 结构 简单 ， 
但 是 由 于 文档 的 缺失 ， 爱 好 者 对 于 每 一 项 新 拉 术 ， 也 经 常 有 不 知 从 何 
下 手 的 感觉 。 为 此 ， 笔 者 结合 自身 的 理解 ， 通 过 这 本 书 系统 性 地 分 析 
这 一 领域 的 众多 技术 ， 希 望 能 帮助 读者 快速 度 过 迷茫 的 时 期 。 


本 书 的 读者 


本 书 主要 是 为 Web 爱 好 者 准备 的 一 本 书 ， 主 要 针对 Web 前 端 开发 
者 、 浏 览 器 开发 者 、Web 平 台 开 发 者 和 其 他 一 切 对 HTML5 技 术 、 
WebKit 泻 染 引 和 敬 和 Chromium 浏 览 器 的 工作 原理 感 兴趣 的 读者 。 对 于 
Web 前 端 开发 者 而 言 ， 笔 者 一 直 认 为 ， 如 果 使 用 HTML5 技 术 来 编写 网 
页 或 者 web 应 用 ， 了 解 其 背后 的 工作 原理 是 写 出 高 效 代 码 的 有 效 捷 
径 。 就 像 开 发 者 想 编 写 高 效 C++ 代码 ， 需 要 理解 C++ 编译 器 背后 的 原 
理 一 样 ， 因 为 只 有 这 样 ， 开 发 者 才能 够 编写 出 高 性 能 的 代码 。 对 于 浏 
览 器 开发 者 来 说 ， 本 书 着 重 介绍 现在 非常 热门 的 WebKit (Blink) 泻 
染 引 擎 和 非常 先进 的 Chromium 浏 览 器 ， 通 过 解释 其 内 部 的 工作 机 制 和 
原理 ， 让 开发 者 可 以 很 快 理解 这 一 切 的 前 因 后 果 。 对 于 其 他 的 广大 爱 
好 者 来 说 ，HTML5 技 术 才 刚刚 开始 ， 未 来 的 发 展 还 将 继续 ， 了 解 这 一 
技术 有 助 于 扩展 视野 ， 而 且 理 解 浏 览 器 对 各 种 技术 的 应 用 和 设计 ， 对 
于 大 家 理解 很 多 其 他 领域 的 技术 也 有 很 强 的 启发 作用 。 


为 本 书 的 介绍 主要 是 基于 对 WebKit 和 和 Chromium 内 部 原理 的 解释 
来 进行 ， 而 这 些 项 目 也 都 是 基于 C/C++ 代码 来 编写 ， 所 以 读者 最 好 对 
该 语言 有 一 些 了 解 。 不 过 ， 如 果 不 了 解 它 也 没有 太 大 的 关系 ， 只 要 对 
面向 对 象 编 程 的 思想 有 所 了 解 ， 疝 读本 书 也 没有 太 大 的 障碍 。 同 时 ， 
本 书 不 是 一 本 介绍 编写 HTMIL/JavaScript 代 码 的 书 ， 所 以 ， 不 会 对 
HTML 的 编程 做 过 多 详细 的 解释 ， 而 是 以 一 种 简单 的 方式 描述 一 些 基 
础 性 常识 。 


本 书 的 组 织 


本 书 基本 的 写作 方式 是 力求 在 介绍 HTML5 技 术 的 基础 上 ， 通 过 对 
W3C 组 织 制定 的 规范 的 解释 ， 进 一 步 解 读 WebKit 泻 染 引 擎 和 Chromium 
浏览 器 是 如 何 设计 出 高 效 的 架构 来 支持 这 些 HTML5 技 术 规范 的 ， 其 中 
着 重 剖 析 内 部 的 框架 和 工作 原理 。 在 很 多 情况 下 ， 笔 者 也 试图 通过 一 
些 开 发 和 工作 实践 来 帮助 理解 这 些 框架 和 实现 背后 的 机 制 和 原理 。 


如 果 想 了 解 整个 泻 染 引擎 的 原理 ， 光 靠 泻 染 引 擎 本 身 不 足以 说 明 
所 有 机 制 ， 所 以 本 书目 始 至 终 都 是 结合 WebKit 项 目 和 基于 WebKit 的 
Chromium 浏 览 器 项 目 来 描述 其 工作 原理 的 ， 因 为 WebKit 项 目 本 身 不 是 
一 个 浏览 器 ， 而 Chromium 浏 览 器 的 设计 和 架构 可 以 帮助 读者 完整 理解 
网 页 的 泻 染 过 程 和 现代 HTML5 新 技术 是 如 何 获得 支持 的 ， 这 一 过 程 的 
确 非 党 精彩 。 


为 了 理解 HTML5 新 技术 和 浏览 器 的 工作 原理 ， 本 书 着 重 带 来 以 下 
方面 的 详细 分 析 ， 包 括 HTML5 技 术 分 析 、 泻 染 引 擎 和 浏览 器 介绍 、 
WebKit 泻 染 引 擎 框架 、Chromium 框 架 和 进程 架构 、 网 页 和 网 页 结构 、 
演 染 过 程 、 网 络 栈 、HTML 语 言 、DOM、 CSS 样 式 、 布 局 计算 、 泻 染 
基础 、 高 级 硬件 加 速 机 制 、JavaScript 引 擎 、 插 件 和 扩展 、 多 媒体 、 移 
动 领 域 、 安 全 机 制 、 调 试 机 制 、 发 展 趋势 和 Web 平 台 等 众多 热门 技术 
和 前 沿 性 话题 。 笔 者 希望 将 HTML5 中 绝 大 多 数 的 重要 技术 都 展现 出 
来 ， 让 读者 可 以 对 这 个 领域 的 众多 技术 有 个 总 体 把 握 并 对 主要 技术 的 
前 因 后 果 有 较为 深入 的 理解 。 


本 书 引 用 的 参考 资料 都 是 笔者 多 年 来 研究 的 对 象 ， 对 于 笔者 理解 
HTML5 技 术 、 前 端 开 发 技术 、 泻 染 引 擎 和 浏览 器 技术 起 了 非常 重要 的 
作用 ， 一 些 论题 可 能 在 本 书 中 介绍 得 不 够 完善 ， 读 者 可 以 参考 这 些 资 
料 ， 做 进一步 的 学 习 和 研究 。 


本 书 是 一 个 讲解 内 部 原理 的 书 ， 涉 及 众多 的 技术 ， 特 别 是 深入 技 
术 内 部 工作 机 制 的 地 方 ， 由 于 这 些 内 容 非常 复杂 ， 而 且 是 根据 笔者 个 
人 的 理解 加 以 分 析 ， 所 以 很 多 时 候 可 能 存在 理解 上 的 偏差 或 者 错误 。 
如 果 有 什么 不 妥 之 处 ， 还 望 广 大 读者 谅解 并 给 予 指导 ， 或 者 将 意见 发 
送 到 我 的 邮箱 : yongsheng@chromium.orgo 
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第 1 章 ”浏览 器 和 浏览 器 内 核 


浏览 器 是 目前 用 户 使 用 范围 最 广 、 使 用 时 间 最 长 的 应 用 程序 之 
一 ， 浏 览 器 的 发 展 也 经 历 了 一 段 坎坷 的 过 程 。 伴 随 着 浏览 器 发 展 的 是 
浏览 器 内 核 ， 它 是 浏览 器 中 最 核心 的 功能 部 件 ， 本 章 作为 本 书 的 开 
始 ， 在 基础 性 介绍 了 浏览 器 和 浏览 器 内 核 等 概念 之 后 引入 了 WebKit 内 
核 的 特征 分 析 和 框架 阐述 。 


1.1 浏览 器 
1.1.1 浏览 器 简介 


互联 网 的 革命 浪潮 带动 了 众多 技术 的 快速 发 展 ， 其 中 ， 网 络 浏览 
器 (之 后 将 简称 为 浏览 器 ) 作为 互联 网 最 重要 的 终端 接口 之 一 在 短 短 
的 二 十 多 年 时 间 里 日 新 月 异 ， 特 别 是 在 进入 21 世 纪 后 ， 越 来 越 多 的 功 
能 被 加 入 到 浏览 器 中 来 。 在 W3C 等 标准 组 织 的 积极 推动 下 逐步 成 型 的 
HTML5 技 术 ， 更 是 成 为 了 浏览 器 发 展 的 火箭 推进 器 。 


提 到 浏览 器 ， 不 得 不 提 的 重量 级 人 物 是 Berners-Lee。Berners-Lee 
是 W3C 组 织 的 理事 ， 他 在 80 年 代 后 期 90 年 代 初 期 发 明了 世界 上 第 一 个 
浏览 器 WorldWideWeb (后 改名 为 Nexus) ， 并 在 1991 年 公布 了 源 代 
码 。 它 支持 早期 的 HTML 标 记 语 言 ， 当 然 ， 它 的 功能 也 很 简单 ， 只 是 
支持 文本 、 简 单 的 样式 表 、 电 影 、 声 音 和 图 片 等 。 但 是 ， 在 当时 的 情 
况 下 ， 它 是 仅 有 的 能 够 可 视 化 网 络 内 容 的 浏览 器 。 


第 二 个 不 得 不 提 的 重量 级 人 物 是 Marc Andreessen. 1199F, A 
正 有 影响 力 的 浏览 器 Mosaic 诞 生 ， 它 是 由 Marc Andreessen 领 导 的 团队 
开发 ， 这 就 是 后 来 易 易 大 名 的 网 景 (Netscape) 浏览 器 。 同 样 地 ， 在 
最 开始 的 时 候 ， 它 所 支持 的 功能 也 有 限 ， 只 能 显示 简单 的 静态 HTML 
元 素 ， 没 有 JavaScript， 没 有 CSS， 更 没有 目前 HTML5 各 种 丰富 的 功 
能 。 不 过 ， 网 景 浏览 器 还 是 大 受 欢迎 ， 获 得 世界 范围 内 的 成 功 ， 之 后 
发 展 迅 速 ， 在 其 顶峰 时 期 ， 占 据 了 绝 大 多 数 的 市 场 份额 。 


事情 的 转变 源 于 1995 年 。 受 Mosaic 浏 览 器 的 深刻 影响 ， 微 软 推出 
了 闻名 世界 的 Internet Explorer (以 下 简称 为 E) 浏览 器 ， 自 此 第 一 次 
浏览 器 大 战 正 式 打 响 。 正 受益 于 Windows 操 作 系统 ， 获 得 了 空前 的 成 
功 ， 其 逐渐 取代 了 网 景 浏览 器 的 领导 地 位 ， 一 直到 网 景 浏览 器 的 消 
亡 ， 至 此 ， 第 一 次 浏览 器 大 战 结束 。 


处 于 低谷 的 网 景 公司 在 1998 年 成 立 了 Mozilla 基 金 会 ， 开 始 凤 凰 音 
禹 。 在 该 基金 会 的 推动 下 ， 网 景 公 司 主 导 开 发 了 著名 的 开源 项 目 火 狐 
浏览 器 (也 就 是 Firefox， 后 面 使 用 该 名 称 ) ， 在 2004 年 发 布 了 1.0 版 
本 ， 拉 开 了 第 二 次 浏览 器 大 战 的 序幕 ， 这 次 大 战 影响 深远 。 受 益 于 IE 
浏览 器 发 展 较为 缓慢 ，Firefox 浏 览 器 自 推出 以 来 就 深 受 大 家 的 喜爱 ， 
其 功能 丰富 ， 扩 展 众 多 ， 因 此 市 场 份 额 一 直 在 上 升 。 


然而 ， 第 二 次 浏览 器 大 战 并 没有 结束 ， 就 在 Firefox 浏 览 器 发 布 1.0 
版 本 的 前 一 年 ， 也 就 是 2003 年 ， 苹 果 发 布 了 Safari 浏 览 器 ， 并 在 2005 年 
释放 了 浏览 器 中 一 种 非常 重要 部 件 的 源 代码 ， 发 起 了 一 个 新 的 开源 项 
目 WebKit 〈 它 是 Safari 浏 览 器 的 内 核 ， 也 是 本 书 的 重点 ) ， 这 拉 开 了 一 
个 新 的 序幕 。 同 时 ， 值 得 一 提 的 是 ， 随 着 移动 操作 系统 和 移动 互联 网 
的 兴起 和 起 快速 发 展 ， 苹 果 同 样 推出 了 Safari 浏 览 器 的 移动 版 ， 并 引入 


了 众多 令 人 激动 的 功能 和 强大 的 移动 用 户 体验 ， 这 也 是 一 个 新 的 里 程 
碑 。 


2008 年 ，Google 公 司 以 苹果 开源 项 目 WebKit 作 为 内 核 ， 创 建 了 一 
个 新 的 项 目 Chromium， 该 项 目的 目标 是 创建 一 个 快速 的 、 支 持 众 多 操 
作 系 统 的 浏览 器 ， 包 括 对 桌面 操作 系统 和 移动 操作 系统 的 支持 。 这 也 
就 是 说 Chromium 使 用 了 同 Safari 一 样 的 浏览 器 内 核 (这 一 说 法 大 体 上 
是 正确 的 ， 实 际 上 也 还 有 很 多 不 同 ) 。 后 面 章 节 的 很 多 讨论 会 围绕 
Chromium 中 的 技术 来 展开 ， 所 以 这 里 会 多 介绍 一 点 。 在 Chromium 项 
目的 基础 上 ，Google 发 布 了 自己 的 浏览 器 产品 Chrome。 不 同 于 WebKit 
之 于 Safari 浏 览 器 ，Chromium 本 身 就 是 一 个 浏览 器 ， 而 不 是 Chrome 浏 
览 器 的 内 核 ，Chrome 浏 览 器 一 般 选 择 Chromium 的 稳定 版 本 作为 它 的 
基础 。Chromium 是 开源 试验 场 ， 它 会 尝试 很 多 创新 并 且 大 胆 的 技术 ， 
当 这 些 技术 稳定 之 后 ，Chrome 才 会 把 它们 集成 进来 ， 也 就 是 说 Chrome 
的 版 本 会 落后 于 Chromium; 其 次 ，Chrome 还 会 加 入 一 些 私 有 的 编码 
解码 器 以 支持 音 视频 等 ;) 再 次 ，Chrome 还 会 整合 Google 众 多 的 网 络 服 
务 ; 最 后 ，Chrome 还 有 自动 更 新 的 功能 (里 然 只 是 Windows 平 台 ) ， 
这 也 是 Chromium 所 没有 的 。Chrome 浏 览 器 的 发 展 也 非常 迅速 ， 很 快 
就 在 个 人 电脑 市 场 占有 重要 的 一 席 之 地 。 


和 目 此 ， 对 于 桌面 系统 而 言 ， 三 足 昂 立 之 势 已 经 形成 。 微 软 正 、 
Mozilla 火 狐 和 Google Chrome 成 了 梨 面 系统 上 最 流行 的 三 款 浏览 矣 ， 三 
者 一 起 占据 了 该 市 场 超过 90% 的 浏览 器 份额 。 对 于 移动 系统 而 言 ， 就 
是 另 一 番 情 形 了 。 由 于 苹果 的 iOS 操 作 系 统 和 Google 的 安 卓 系统 占据 了 
绝对 领先 的 地 位 ， 因 而 这 两 个 系统 的 默认 浏览 器 Safari 浏 览 器 和 安 卓 浏 
览 器 变 得 非常 流行 。 有 趣 的 是 ， 它 们 都 是 基于 苹果 发 起 的 开源 项 目 
WebKit。 浏 览 器 作为 用 户 访 问 互联 网 最 重要 的 接口 ， 也 难怪 获得 如 此 


众多 巨头 的 关注 。 未 来 ， 必 将 还 是 浏览 器 继续 高 速 发 展 、 竞 争 激 烈 的 
场景 。 


1.1.2 ”浏览 器 特性 


从 最 初 的 仅 支 持 简单 功能 到 如 今 支持 种 类 繁多 的 功能 和 特性 ， 浏 
览 器 一 直 在 向 前 发 展 ， 可 以 预见 ， 今 后 浏览 器 的 能 力 会 越 来 越 强 。 那 
么 目前 一 个 浏览 器 应 该 包括 哪些 功能 呢 ? 


大 体 上 来 讲 ， 浏 览 器 的 这 些 功 能 包括 网 络 、 资 源 管理 、 网 页 浏 
览 、 多 页 面 管 理 、 插 件 和 扩展 、 书 签 管理 、 历 史记 录 管 理 、 设 置 管 
理 、 下 载 管理 、 账 户 和 同步 、 安 全 机 制 、 隐 私 管理 、 外 观 主题 、 开 发 
者 工具 等 。 下 面 是 对 它们 之 中 的 一 些 重要 功能 的 详细 介绍 。 


。 网 络 : 它 是 第 一 步 ， 浏 览 器 通过 网 络 模块 来 下 载 各 种 各 样 的 资 
源 ， 例 如 HTML 文 本 、JavaScript 人 代码、 样式 表 、 图 片 、 音 视频 文 
件 等 。 网 络 部 分 其 实 非 常 重要 ， 因 为 它 耗 时 比较 长 而 且 需 要 安全 
访问 互联 网 上 的 资源 。 

资源 管理 : 从 网 络 下 载 或 者 本 地 获取 资源 ， 并 将 它们 管理 起 来 ， 

这 需要 高 效 的 管理 机 制 。 例 如 如 何 避 免 重复 下 载 资源 、 缓 存 资源 
等 ， 都 是 它们 需要 解决 的 问题 。 

网 页 浏览 ; 这 是 浏览 器 的 核心 也 是 最 基本 、 最 重要 的 功能 ， 它 通 
过 网 络 下 载 资源 并 从 资源 管理 器 获得 资源 ， 将 它们 转变 为 可 视 化 
的 结果 ， 这 也 是 后 面 介绍 的 浏览 器 内 核 最 重要 的 功能 。 这 部 分 会 
分 成 多 个 章节 在 后 面 逐一 介绍 。 

多 页 面 管理 : 很 多 浏览 器 支持 多 页 面 浏 览 ， 所 以 需要 支持 多 个 网 
页 同时 加 载 ， 这 让 浏览 器 变 得 更 为 复杂 。 同 时 ， 如 何 解决 多 页 面 


的 相互 影响 和 安全 等 问题 也 非常 重要 ， 为 此 ， 一 些 浏 览 器 做 了 大 
量 的 工作 ， 例 如 可 能 使 用 线程 或 是 进程 来 绘制 网 页 。 

插件 和 扩展 : 这 是 现代 浏览 器 的 一 个 重要 特征 ， 它 们 不 仅 能 显示 
网 页 ， 而 且 能 支持 各 种 形式 的 插件 和 扩展 。 插 件 是 用 来 显示 网 页 
特定 内 容 的 ， 而 扩展 则 是 增加 浏览 器 新 功能 的 软件 或 压缩 包 。 目 
前 常见 的 插件 有 NPAPI 插 件 、PPAPI 插 件 、ActiveX 插 件 等 ， 扩 展 
则 跟 浏览 器 密切 相关 ， 常 见 的 有 Firefox 扩 展 和 Chromium 扩 展 。 这 
在 第 10 章 中 会 做 介绍 。 

账户 和 同步 : 将 浏览 的 相关 信息 ， 例 如 历史 记录 、 书 签 等 信息 同 
步 到 服务 器 ， 给 用 户 一 个 多 系统 下 的 统一 体验 ， 这 对 用 户 非 常 友 
好 ， 是 浏览 器 易 用 性 的 一 个 显著 标识 。 

安全 机 制 : 本 质 是 提供 一 个 安全 的 浏览 器 环境 ， 避 免 用 户 信息 被 
各 种 非法 工具 窃取 和 破坏 。 这 可 能 包括 显示 用 户 访问 的 网 站 是 否 
安全 、 为 网 站 设置 安全 级 别 、 防 止 浏览 器 被 恶意 代码 攻破 等 ， 这 
在 第 12 章 会 作 详细 介绍 。 

开发 者 工具 : 这 对 普通 用 户 来 说 用 处 不 大 ， 但 是 对 网 页 开发 者 来 
说 意义 却 非 比 寻 常 。 一 个 优秀 的 开发 者 工具 可 以 帮助 审查 HTML 
元 素 、 调 试 JavaScript 人 代码、 改善 网 页 性 能 等 ， 这 在 第 14 章 中 会 作 
详细 介绍 。 


还 有 一 个 值得 一 提 的 就 是 浏览 器 的 多 操作 系统 支持 ， 包 括 桌 面 和 
移动 两 个 领域 。 让 我 们 看 看 目前 主流 浏览 器 所 支持 的 主流 操作 系统 情 
况 ， 如 表 1-1 所 示 。 从 中 我 们 可 以 看 出 ，Chrome 支 持 目前 所 有 主流 的 
操作 系统 ， 后 面 依次 是 Firefox、Safari- 和 IE。 不 过 ， 因 为 .OS 的 一 些 特 
殊 限 制 ， 使 得 Chrome 虽 然 发 布 了 iOS 版 ， 但 是 其 内 核 仍 然 不 是 自身 
的 ， 还 是 iOS 系 统 默认 的 。 而 Firefox 和 正则 直接 没有 iOS 版 。 


表 1-1 浏览 器 支持 的 操作 系统 


Windows 


Linux 
Android 


11.3 HTML 


HTML (HyperText Markup Language) ， 一 种 超 文 本 标记 语言 ， 
用 于 网 页 的 创建 和 其 他 信息 在 浏览 器 中 的 显示 。 它 的 语法 比较 简单 ， 
基本 上 是 一 系列 的 标签 (也 称 为 元 素 ) ， 这 些 标 签 可 以 用 来 表示 文 
字 、 图 片 、 多 媒体 等 。HTML1.0 由 著名 的 Berners-Lee (前 面 提 到 的 第 
一 个 浏览 器 发 明 者 ) 于 1991 年 提出 ， 后 面 历经 多 次 版 本 更 新 ， 直 到 
1997 年 的 4.0 版 本 和 1999 年 的 4.01 版 本 。 


在 HTML4.01 之 后 的 很 长 时 间 里 ， 规 范 组 织 都 没有 大 而 新 的 规范 
出 炉 ， 这 并 不 表示 HTML 语 言 一 片 死 气 沉沉 。 相 反 ， 这 是 因为 规 沁 组 
织 对 新 规范 草案 的 争论 非常 激烈 。 终 于 ， 具 有 划时代 意义 的 HTML5 技 
术 在 2012 年 由 两 大 组 织 WHATWG 和 W3C (这 两 个 组 织 有 了 明确 不 同 的 
目标 ， 有 兴趣 的 读者 可 以 自行 搜索 了 解 ) 推荐 为 候选 规范 。HTML5 是 

一 系列 新 技术 的 集合 ， 其 构建 思想 和 前 颇 性 远 远 超过 之 前 的 规范 ， 将 
更 多 令 人 和 耳目 一 新 的 技术 带 入 到 了 Web 前 端 领域 ， 意 义 非常 深远 。 它 
不 仅 可 以 构建 内 容 更 加 丰富 的 网 页 ， 更 描述 了 条 新 的 HTML5 技 术 作 为 

一 个 平台 所 需要 的 能 o 


HTML5 包 含 了 一 系列 的 标准 ， 一 共 包 含 了 10 个 大 的 类 别 ， 它 们 分 
别 是 离线 (offline) 、 存 储 (storage) 、 连 接 (connectivity) 、 文 件 访 
问 (file access) 、 语 义 (semantics) 、 音 频 和 视频 (audio/video) 、 
3D 和 图 形 (3D/graphics ) 、 展 示 (presentation ) 、 性 能 
(performance) 和 其 他 (Nuts and bolts) 。 其 中 每 个 大 的 类 别 都 是 由 
众多 技术 或 者 是 规范 组 成 ， 表 1-2 描 述 了 这 10 个 类 别 所 包含 的 具体 规 


tt 
>DDo 


HTML5 是 如 此 的 重要 ， 它 已 经 成 为 众多 浏览 器 重点 关注 的 对 象 。 
更 好 地 支持 HTML5， 是 浏览 器 能 力 强 大 的 重要 表现 ， 也 是 浏览 器 厂商 
宣传 的 重点 。 目 前 ， 网 站 html5test.com 提 供 了 测试 浏览 器 支持 HTML5 
的 情况 。 表 1-3 显 示 上 述 四 种 浏览 器 在 Windows7 上 支持 HTML5 的 情 
况 ， 得 分 为 该 网 站 检测 后 的 结果 。 数 据 显示 ， 在 Windows7 上 ，Chrome 
占据 了 一 些 优势 。 更 多 关于 浏览 器 支持 HTML5 的 情况 ， 读 者 可 以 到 
html5test.com_E 7 fi#. 


表 1-2 HTML5 类 别 和 包含 的 各 种 规范 


类 别 | 具体 规范 


Application cache, Local storage, Indexed DB ， 在 线 / 离 
线 事件 


Application cache, Local storage, Indexed DB 等 
Web Sockets，Server-sent 事 件 

文件 访问 || File API, File System, FileWriter, ProgressEvents 
| 


AN 各 种 新 的 元 素 ， 包 括 Media，structural， 国 际 化 ， 
Link relation, 属 性 ，form 类 型 ，microdata 等 方面 


ae 视 


HTML5 Video, Web Audio, WebRTC, Video track 等 


Canvas 2D, 3D CSS33#R, WebGL, SVG 

CSS3 2D/3D 变 换 ， 转 换 (transition) , WebFonts= 
能 | Web Worker，HTTP caching 等 

| ee | 触 控 和 鼠标 ，Shadow DOM, CSS masking 


表 1-3 ”四 种 浏览 器 在 Windows 7 上 的 HTML5 支 持 得 分 


Tr vane am 
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B a 网 页 内 容 是 静态 的 ， 也 就 是 说 内 容 
能 动态 变化 的 。 服 务 器 将 内 容 传 给 浏览 器 之 后 ， 页 面 显 示 结 果 就 

这 显然 难以 满足 各 种 各 样 的 现实 需求 。 随 后 JavaScript 语 
言 诞生 了 ， 该 语言 是 EMCAScript 规 范 的 一 种 实现 。 因为 最 初 还 有 其 他 
用 于 网 页 的 脚本 语言 ， 例 如 JScript。 所 以 ， 标 准 化 组 织 制定 了 脚本 语 
言 的 规范 ， 也 就 是 EMCAScript。 而 JavaScript 作 为 其 中 的 一 个 实现 ， 受 
到 了 极为 广泛 的 使 用 。 昌 然 JavaScript 语 言 的 定义 受到 了 众多 的 批评 ， 
但 是 如 今 ， 网 页 已 经 离 不 开 它 了 ，HTML5 中 的 很 多 规范 都 是 基于 
JavaScript 语 言 来 定义 的 。 网 页 第 三 个 革命 性 成 果 是 CSS (Cascading 


Style Sheet) ， 也 就 是 级 联 样式 表 。 因 为 早期 阶段 的 网 页 不 仅 是 静态 
的 ， 而 且 表 现形 式 非常 固定 和 简单 ， 所 以 内 容 没 有 办 法 以 各 种 可 视 化 
处 理 效果 展示 出 来 。 引 入 了 CSS 之 后 ， 这 一 技术 使 得 内 容 和 显示 分 离 
开 来 ， 对 网 页 开发 来 说 ， 极 大 地 增强 了 显示 效果 并 提升 了 开发 效率 。 


伴随 HTML 技 术 的 另 一 个 技术 是 HTTP， 这 是 一 种 构建 在 TCP/IP 之 
上 的 应 用 层 协议 ， 用 于 传输 HTML 文 本 和 所 涉及 的 各 种 资源 ， 包 括 图 
片 和 多 媒体 等 。 随 后 ， 安 全 版 的 HTTP 也 就 是 HTTPS 诞 生 ， 它 在 HTTP 
之 下 加 入 SSL/TLS， 用 于 安全 地 传输 数据 。 


这 些 规 范 很 重要 ， 特 别 对 于 开发 者 来 说 ， 想 象 一 下 ， 如 果 每 个 浏 
览 器 都 有 自己 的 一 套 标 准 ， 那 将 是 灾难 性 的 。 不 幸 的 是 ， 事 实 基本 上 
就 是 这 样 , “碎片 化 ?成 为 Web 网 页 开发 中 一 个 极为 严重 的 问题 。 因 
此 ， 使 用 这 些 规范 的 网 页 也 不 一 定 能 在 所 有 浏览 器 上 正常 运行 ， 兼 容 
性 成 为 HTML 网 页 的 一 项 重大 挑战 。 欣 喜 的 是 ，HTML5 规 范 的 制定 得 
到 了 主流 浏览 器 厂商 的 支持 ， 当 然 ， 这 条 路 依旧 很 长 。 


1.1.4 ”用 户 代 理 和 浏览 器 行为 


HARI (User Agent) 是 个 很 奇怪 的 东西 ， 其 作用 是 表明 浏览 
器 的 身份 ， 因 而 互联 网 的 内 容 供应 商 能 够 知道 发 送 请 求 的 浏览 器 身 
份 ， 浏 览 器 能 够 支持 什么 样 的 功能 。 因 此 ， 网 页 内 容 提 供 商 便 可 以 为 
不 同 的 浏览 器 发 送 不 同 的 网 页 内 容 。 例 如 通常 为 Chrome 的 桌面 版 和 
Android 有 版 发 送 不 同 的 网 页 内 容 以 适应 屏幕 和 操作 系统 的 差别 ， 或 者 是 
因为 不 同 的 浏览 器 支持 的 标准 不 一 样 ， 这 样 做 的 目的 当然 是 为 了 避免 
浏览 器 不 支持 的 功能 以 及 获得 更 好 的 用 户 体验 。 


前 面 提 到 过 ， 浏 览 器 大 战 相 当 激 烈 ， a A A 
行 的 浏览 器 的 行为 设计 一 个 不 同 的 网 页 ， 不 管 网 页 是 否 遵 循 标准 。 这 
对 其 他 浏览 器 来 说 是 个 打击 ， 因 为 很 多 时 候 ， 
能 ， 所 以 也 希望 收 到 类 似 内 容 的 网 页 。 于 是 ， 出 现 了 下 面 令 人 这 异 并 
且 越 来 越 长 的 用 户 代理 字符 串 。 


最 初 是 Mozilla Firefox 浏 览 器 设置 了 自己 的 用 户 代理 字符 串 ， 例 如 
“Mozilla/1.0 (Windows NT 6.1;rv:2.0.1) Gecko/20100101Firefox/4.0.1” , 
此 字符 串 表明 这 是 一 个 Windows 版 的 使 用 Gecko 引 | 擎 (火狐 浏览 器 内 
核 ， 下 文 即 将 涉及 ) 的 火狐 浏览 器 。 所 以 ， 互 联网 的 内 容 提供 商 就 发 
送 了 特定 的 网 页 到 浏览 器 。 问 题 来 了 ， 下 发现 很 多 内 容 提供 商 传 给 本 
浏览 器 的 内 容 没 有 传 给 火狐 的 丰富 ， 虽 然 正 也 能 支持 它们 。 那 怎么 办 
w? 看 看 IE7 的 用 户 代 理 设 置 就 能 明白 一 一 “Mozilla/4.0 
(compatible;MSIE 7.0;Windows NT 6.0)”。 这 个 字符 串 的 含义 是 什么 
E? 它 表 明 这 是 一 个 可 以 和 Mozilla 兼 容 的 windows 版 正 浏览 器 。 这 
样 ， 内 容 提供 商会 根据 “Mozilla” 字 符 串 信息 ， 将 发 送 oe 
的 内 容 也 发 送 给 下 浏览 器 ， 因 为 在 他 们 看 来 ， 这 些 都 是 “Mozilla” 的 浏 


Wh 
DLA 


在 这 之 后 ， 情 况 不 仅 没有 缓解 ， 反 而 变 得 越 来 越 严 重 。 苹 果 的 
Safari 浏 览 器 也 设置 了 类 似 的 代理 ， 但 是 该 浏览 器 额外 加 入 了 
ApplewebKit、Safari 等 信息 ， 随 着 它 的 流行 《特别 是 移动 领域 ) ， 
Chrome 等 浏览 器 除了 包含 Mozilla 之 外 ， 还 添加 了 Safari 浏 览 器 的 那些 
标志 信息 ， 导 致 它 的 用 户 代理 字符 串 越 来 越 长 (如 下 所 示 ) o 


Mozilla/5.0 (Linux;Android4.0.4;Galaxy Nexus Build/IMM76B) 


AppleWebKit/535.19 (KHTML, like  Gecko)Chrome/18.0.1025.133 


Mobile Safari/535.19 


确实 是 够 长 的 ， 好 吧 ， 我 们 姑且 将 之 理解 为 一 一 一 切 为 了 更 好 的 
网 页 内 容 体验 。 从 上 面 可 以 看 出 ， 因 为 某 种 浏览 器 的 流行 ， 很 多 内 容 
提供 商 和 网 站 需要 根据 流行 的 浏览 器 来 定制 内 容 ， 当 后 来 者 需要 相同 
内 容 的 时 候 ， 就 只 能 是 通过 这 些 用 户 代理 的 信息 来 模仿 获得 。 


1.15 SoH: 浏览 器 用 户 代 理 


为 了 帮助 读者 了 解 用 户 代 理 的 含义 ， 本 节 介 绍 如 何在 Google 
Chrome 的 Windows 版 或 者 Linux 版 中 设置 和 改变 用 户 代 理 ， 而 后 再 来 讲 
解 代 理 设置 后 对 网 页 结果 改变 的 相关 原理 。 


1. 以 百度 的 首页 为 例 ， 当 读者 在 地 址 栏 输入 百度 的 网 址 
www.baidu.com 后 ， 默 认 情 况 下 ，Google Chrome 中 显示 的 网 页 内 
容 如 图 1-1 所 示 。 读 者 可 以 看 到 这 是 一 个 传统 的 网 页 布局 、 链 接 排 
布 非常 密集 、 适 合用 鼠标 单 击 的 操作 系统 。 


(T) 
Bai 人 百度 


.时 ， 为 爱 送 平安 ， 护 估 外 安 儿童 
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图 1-1 百度 为 桌面 系统 设计 的 用 户 访问 首页 


2. 在 Chrome 中 ， 读 者 可 以 给 用 户 代理 设置 任何 自己 定义 的 内 容 。 有 
两 种 方法 : 其 一 是 在 Chrome 启 动 时 加 入 命令 行 参 数 --user-agent=” 
xxx”, 其 二 是 首先 打开 Chrome 的 开发 者 工具 ， 然 后 在 右 下 角 单 击 
“设置 ”， 之 后 选择 “ 禾 盖 ?选项 ， 最 后 读者 单 击 * 用 户 代 理 ” 框 来 为 
该 页 面 设置 新 的 用 户 代 理 。 这 里 ， 我 们 选择 “Chrome-Android 
Mobile”。 需 要 记 住 的 是 ， 它 们 都 不 会 被 保存 ， 所 以 重启 后 无 效 。 

.刷新 当前 的 页 面 ， 读 者 会 看 到 一 个 全 新 的 页 面 ， 该 页 面 跟 读者 在 
手机 上 看 到 的 页 面相 同 。 该 页 面 是 为 Android 系 统 设计 的 ，HTML 
元 素 之 间 的 间距 更 大 ， 页 面 更 简洁 ， 更 适合 触 屏 手机 这 样 的 硬件 
和 系统 ， 如 图 1-2 所 示 的 结果 。 


UJ 
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图 1-2 ”百度 为 移动 系统 设计 的 用 户 访问 首页 


用 户 代理 信息 是 浏览 器 向 网 站 服务 器 发 送 HTTP 请 求 消息 头 的 时 候 
加 入 的 ， 这 样 ， 网 站 服务 器 就 能 很 容易 了 解 对 方 的 浏览 器 信息 。 从 图 
1-1 和 图 1-2 可 以 明显 看 出 不 同 用 户 代理 信息 对 于 网 页 内 容 的 影响 ， 有 
兴趣 的 读者 还 可 以 深入 了 解 它 们 在 产 代码 上 面 的 区 别 。 当 然 ， 不 是 所 
有 网 站 都 对 不 同 的 用 户 代理 设置 了 不 同 的 内 容 ， 这 一 切 完全 取决 于 网 
站 设计 者 们 。 


1.2 浏览 器 内 核 及 特性 
1.2.1 内核 和 主流 内 核 


在 浏览 器 中 ， 有 一 个 最 重要 的 模块 ， 它 主要 的 作用 是 将 页 面 转 变 
成 可 视 化 i Eee LAURA) 的 图 像 结 果 ， 这 融 是 浏览 器 内 
核 。 通 常 ， 它 也 被 称 为 泻 染 引擎 。 所 谓 的 泻 染 ， 就 是 根据 描述 或 者 定 


义 构建 数学 模型 ， 通 过 模型 生成 图 像 的 过 程 。 浏 览 器 的 泻 染 引擎 就 是 
能 够 将 HTML/CSS/JavaScript 文 本 及 其 相应 的 资源 文件 转换 成 图 像 结 果 
的 模块 ， 如 图 1-3 所 示 。 这 里 暂时 先 把 它 看 成 一 个 黑 盒 ， 其 中 的 细节 就 
是 本 书 的 重点 。 


HTML/CSS 


JavaScript 


图 1-3 ”浏览 器 泻 染 引 擎 作用 


前 面 提 到 了 第 二 次 浏览 器 大 战 ， 伴 随 其 中 的 也 就 是 泻 染 引擎 之 
争 。 目 前 ， 主 流 的 泻 染 引擎 包括 Trident、Gecko 和 WebKit， 它 们 分 别 
是 了 正 、 火 狐 和 Chrome 的 内 核 (2013 年 ，Google 宣 布 了 Blink 内 核 ， 它 其 
实 是 从 WebKit 复 制 出 去 的 ， 后 一 节 重 点 介绍 ) 。 这 一 对 应 让 人 看 起 来 
好 像 泻 染 引 擎 和 浏览 器 是 一 一 对 应 的 ， 其 实 不 然 。 事 实 上 ， 同 一 个 泻 
染 引 擎 (虽然 可 能 有 很 多 不 同 的 变化 ) 可 以 被 多 个 浏览 器 所 采用 。 


为 了 便于 读者 理解 ， 可 以 把 Linux 内 核 和 浏览 器 泻 染 引擎 对 应 起 
来 ， 把 基于 Linux 内 核 的 多 个 操作 系统 (Ubuntu, Fedora, Android=) 
和 浏览 器 对 应 起 来 。 使 用 Linux 内 核 的 操作 系统 非常 多 ， 但 是 它们 都 是 
基于 Linux 内 核 。 但 是 ， 某 些 操作 系统 对 内 核 作 了 很 多 的 改变 ， 这 使 得 
这 些 操作 系统 之 间 差 别 也 很 大 。 有 具体 到 浏览 器 和 浏览 器 内 核 上 也 是 类 
似 ， 表 1-4 显 示 了 三 个 主流 泻 染 引擎 和 采用 它们 的 浏览 器 和 Web 平 台 

(Web 的 平台 化 是 个 很 新 的 话题 ， 在 第 15 章 会 介绍 ) 。 


表 1-4 浏览 器 和 Web 平 台 及 其 泻 染 引擎 


Trident Gecko WebKit 
| | | 


基于 泻 染 | IE Firefox Safari， 


引擎 的 浏 Chromium/Chrome, 
览 器 或 者 Android 浏 览 器 ， 
Web 平 台 ChromeOS，WebOS 等 


由 苹果 发 起 的 WebKit 开 源 项 目 最 受 业 界 关 注 。 自 从 开放 源 代 码 
后 ， 越 来 越 多 的 浏览 器 采用 该 泻 染 引擎 ， 特 别 是 在 移动 领域 ， 更 占据 
了 垄断 的 地 位 。 在 表 1-4 中 仅 仪 是 列 出 了 其 中 的 一 小 部 分 使 用 WebKit 引 | 
擎 作为 内 核 的 浏览 器 ， 根 据 Wikipedia 上 面 的 数据 ， 超 过 30 种 浏览 器 和 
Web 平 台 是 基于 WebKit 泻 染 引 擎 开发 的 。 值 得 强调 的 是 ， 现 在 已 经 有 
了 基于 WebKit 开 发 的 Web 平台， 包括 ChromeOS 和 WebOS。 它 们 利用 
HTML5 强 大 的 能 力 ， 具 有 前 瞻 性 地 党 试 开 发 了 支持 HTML5 的 Web 操 作 


1.2.2 ”内 核 特 征 


到 目前 为 止 ， 泻 染 引 擎 对 我 们 而 言 还 只 是 一 个 黑 盒 子 ， 黑 盒子 中 
包含 什么 以 及 有 什么 作用 ， 我 们 还 一 无 所 知 ， 本 小 节 让 我 们 一 起 一 宋 
其 中 的 “蹊跷 ”。 


根据 泻 染 引擎 所 提供 的 泻 染 网 页 的 功能 ， 一 般 而 言 ， 它 需要 包含 
图 1-4 中 所 描述 的 众多 功能 模块 。 图 中 主要 分 成 三 层 ， 最 上 层 使 用 虚线 
框 住 的 是 泻 染 引擎 所 提供 的 功能 。 


图 1-4 泻 染 引擎 模块 及 其 依赖 的 模块 


从 图 中 大 致 可 以 看 出 ， 一 个 泻 染 引 擎 主要 包括 HTML 解 释 器 、 


CSS 解 释 器 、 布 局 和 JavaScript 引 擎 等 ， 其 他 还 有 绘图 模块 、 网 络 等 并 
没有 在 图 中 直接 表示 出 来 ， 下 面 依次 来 描述 它们 。 


。HTML 解释 器 : 解释 HTML 文 本 的 解释 器 ， 主 要 作用 是 将 HTML 


文本 解释 成 DOM (文档 对 象 模 型 )》 树 ，DOM 是 一 种 文档 的 表示 
pa 

CSS 解 释 器 : 级 联 样式 表 的 解释 器 ， 它 的 作用 是 为 DOM 中 的 各 个 
元 素 对 象 计 算出 样式 信息 ， 从 而 为 计算 最 后 网 页 的 布局 提供 基础 
设施 。 

布局 : 在 DOM 创 建 之 后 ，Webkit 需 要 将 其 中 的 元 素 对 象 同样 式 信 
息 结合 起 来 ， 计 算 它 们 的 大 小 位 置 等 布局 信息 ， 形 成 一 个 能 够 表 
示 这 所 有 信息 的 内 部 表示 模型 。 

JavaScript5|#: 使 用 JavaScript 代 码 可 以 修改 网 页 的 内 容 ， 也 能 
修改 CSS 的 信息 ，JavaScript 引擎 能 够 解释 JavaScript 代 码 并 通过 
DOM 接 口 和 CSSOM 接 口 来 修改 网 页 内 容 和 样式 信息 ， 从 而 改变 
泻 染 的 结果 。 

绘图 : 使 用 图 形 库 将 布局 计算 后 的 各 个 网 页 的 节点 绘制 成 图 像 结 
Ro 


这 些 模块 依赖 很 多 其 他 的 基础 模块 ， 这 其 中 包括 网 络 、 人 存储 、 
2D/3D 图 形 、 音 频 视 频 和 图 片 解 码 器 等 。 实 际 上 ， 泻 染 引 擎 中 还 应 该 
包括 如 何 使 用 这 些 依赖 模块 的 部 分 ， 这 部 分 的 工作 其 实 并 不 少 ， 因 为 
需要 使 用 设计 出 合适 的 框架 使 用 它们 来 高 效 地 泻 染 网 页 ， 后 面 章 节 会 
详细 人 介绍。 例如， 利用 2D/3D 图 形 库 来 实现 高 性 能 的 网 页 绘制 和 网 页 
的 3D 泻 染 ， 这 个 实现 非常 的 复杂 。 最 后 ， 当 然 ， 在 最 下 层 ， 依 然 少 不 
了 操作 系统 的 支持 ， 例 如 线程 支持 、 文 件 支持 等 。 


在 了 解 了 这 些 主要 模块 之 后 ， 下 面 介 绍 这 些 模块 是 如 何 一 起 工作 
以 完成 网 页 的 泻 染 过 程 。 一 般 的 ， 一 个 典型 的 泻 染 过 程 如 图 1-5 所 示 ， 
这 是 泻 染 引擎 的 核心 过 程 ， 一 切 都 是 围绕 着 它 来 的 。 


下 面 从 左 至 右 逐 次 解释 图 1-5 中 的 这 一 过 程 ， 先 后 关系 由 图 中 的 实 
线 箭头 表示 。 从 左上 角 开 始 ， 首 先是 网 页 内 容 ， 输 入 到 HTML 解 释 
器 ，HIML 解 释 器 在 解释 它 后 构建 成 一 哥 DOM 树 ， 这 期 间 如 果 遇 到 
JavaScript 代 码 则 交 给 JavaScript 引 擎 去 处 理 ; 如 果 网 页 中 包含 CSS， 则 
交 给 CSS 解 释 器 去 解释 。 当 DOM 建 立 的 时 候 ， 泻 染 引擎 接收 来 自 CSS 
解释 器 的 样式 信息 ， 构 建 一 个 新 的 内 部 绘图 模型 。 该 模型 由 布局 模块 
计算 模型 内 部 各 个 元 素 的 位 置 和 大 小 信息 ， 最 后 由 绘图 模块 完成 从 该 
模型 到 图 像 的 绘制 。 


SESE CSS 解释 
网 页 内 容 a 


JavaScript 


--------- 引擎 


图 1-5 ” 泻 染 引擎 的 一 般 演 染 过 程 及 各 阶段 依赖 的 其 他 模块 


最 后 解释 图 1-5 中 虚线 箭头 的 指向 含义 。 它 们 表示 在 泻 染 过 程 中 ， 
每 个 阶段 可 能 使 用 到 的 其 他 模块 。 在 网 页 内 容 的 下 载 中 ， 需 要 使 用 到 
网 络 和 存储 ， 这 点 显而易见 。 但 计算 布局 和 绘图 的 时 候 ， 需 要 使 用 
2D/3D 的 图 形 模块 ， 同 时 因为 要 生成 最 后 的 可 视 化 结果 ， 这 时 需要 开 
始 解码 音频 、 视 频 和 图 片 ， 同 其 他 内 容 一 起 绘制 到 最 后 的 图 像 中 。 


在 泻 染 完 成 之 后 ， 用 户 可 能 需要 跟 泻 染 的 结果 进行 交互 ， 或 者 网 
页 自身 有 动画 操作 ， 一 般 而 言 ， 这 需要 持续 的 重复 泻 染 过 程 。 


1.3 WebKit 内 核 


1.3.1 WebKit 


说 到 WebKit 的 渊源 ， 这 还 得 从 KHTML 说 起 。 话 说 在 1998 年 ， 苹 
果 公 司 参 与 了 由 KDE 开 源 社 区 发 起 的 网 页 泻 染 引擎 KHTML 的 开源 项 
目 开 发 ， 它 同 KDE 开 源 社 区 一 起 共同 提交 代码 帮助 推动 KHTML 的 发 


展 ， 一 开始 一 切 都 很 美好 。 但 是 ， 很 快 苹果 公司 发 现 ，KHTML 的 开 
发 者 不 喜欢 接受 很 多 苹果 公司 工程 师 提 交 的 代码 ， 因 为 他 们 提交 的 代 
码 包 很 庞大 并 且 这 些 代 码 没 有 合适 的 文档 或 者 注释 来 描述 它们 。 两 者 
的 分 歧 越 来 越 大 ， 最 终 在 2001 年 ， 苹 果 宣 布 从 KHTML 的 源 代码 树 中 
复制 代码 出 来 ， 成 立 了 一 个 新 的 项 目 ， 这 就 是 大 名 见 见 的 WebKit。 不 
过 当时 它 是 一 个 封闭 的 项 目 。2005 年 ， 苹 果 决 定 将 WebKit 项 目 开 源 ， 
一 举动 极 大 地 推动 了 该 项 目的 发 展 。 从 此 ，WebKit 走 上 了 高 速 发 展 
的 道路 ， 在 短 短 的 几 年 时 间 里 ， 被 其 他 很 多 公司 采用 作为 浏览 器 的 内 
核 。 


当 笔者 谈 到 “WebKit”* 的 时 候 ， 其 实 可 以 表示 两 种 含义 ， 这 里 姑且 
称 为 广义 WebKit 和 狭义 WebKit。 广 义 的 WebKit 指 的 就 是 WebKit 项 目 。 
为 了 解释 狭义 WebKit， 让 我 们 在 一 个 更 高 层次 上 俯视 一 下 这 个 开源 项 
目 。 图 1-6 显 示 的 是 该 项 目的 大 模块 图 (在 第 3 章 中 会 详细 描述 其 中 的 
细节 ) 。 图 中 “WebKit 语 入 式 接口 * 就 是 指 的 狭义 WebKit， 它 指 的 是 在 
WebCore (包含 上 面 提 到 的 HTML 解 释 器 、CSS 人 解释 器 和 布局 等 模块 ) 
和 JavaScript 引 擎 之 上 的 一 层 绑 定 和 主 入 式 编 程 接 口 ， 可 以 被 各 种 浏览 
器 调用 。 以 后 如 无 特别 说 明 ， 所 引用 的 WebKit 均 是 指 广义 的 概念 。 
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调用 系统 或 依赖 库 接口 的 桥接 层 


1-6 ” WebKit 项 目的 大 模块 


WebKit 项 目 自 开源 以 来 就 以 结构 清晰 、 易 于 维护 等 优点 受到 了 众 
多 浏览 器 或 者 Web 平 台 厂 两 的 青睐 。 随 之 而 来 一 个 显而易见 的 问题 就 
是 ， 由 于 各 自 需求 不 同 ， 或 者 操作 系统 不 同 ， 或 者 依赖 的 模块 不 同 
(如 2D 图 形 库 ， 有 CG、skia、cairo、Qt 等 ) ， 操 作 系统 的 开发 者 必然 
需要 WebKit 设 计 和 定义 一 套 灵活 的 框架 结构 ， 而 不 同 的 厂商 基于 框架 
结构 ， 完 成 基于 自身 操作 系统 和 依赖 模块 的 实现 ， 这 里 我 们 也 称 之 为 
WebKit 移 植 (Port) o WebKit 这 种 简单 灵活 和 便于 引入 新 移植 的 特 
性 ， 使 其 迅速 成 为 最 受 欢迎 的 泻 染 引 擎 。 基 于 WebKit 的 浏览 器 遍地 开 
伦 ， 不 仅 包 括 桌 面市 场 ， 也 包括 逐步 崛起 的 移动 市 场 。 从 泻 染 引擎 市 
场 的 妃 随 者 到 领跑 者 ，WebKit 仅 仅 用 了 不 到 10 年 的 时 间 ， 这 不 得 不 说 
是 个 奇迹 。 


WebKit 有 众多 的 移植 ， 每 个 移植 的 实现 都 不 同 ， 出 于 自身 的 考 
虑 ， 每 个 移植 对 HIML5 规 范 的 支持 也 不 尽 相 同 ， 所 以 ， 尽 管 都 使 用 
WebKit， 但 还 是 可 能 对 兼容 性 带 来 很 大 的 挑战 。 另 一 方面 ， 更 为 令 人 
惊讶 的 是 ，WebKit 也 在 分 裂 ， 详 见 后 面 介 绍 的 Chromium 新 内 核 一 一 
Blinko 


WebKit 的 代码 可 以 从 官方 网 站 www.webkit.org 上 获取 ， 上 面 有 详 
细 介 绍 如 何 下 载 、 如 何 编译 的 文档 ， 这 里 不 再 更 述 。 而 Chromium 的 代 
码 可 以 从 官方 网 站 www.chromium.org 上 获取 ， 这 两 个 项 目的 代码 是 本 
书 讲述 的 重点 。 


1.3.2 WebKit#lWebKit2 


这 里 说 的 WebKit 不 是 指 开源 项 目 WebKit， 而 是 前 面 说 到 的 狭义 上 
的 绑 定 和 接口 层 。 同 样 的 ，WebKit2 也 是 一 个 狭义 上 的 绑 定 和 接口 


层 。 但 是 ，WebKit2 不 是 WebKit 绪 定 和 接口 层 的 简单 修改 版 ， 而 是 一 
组 支持 新 架构 的 全 新 绑 定 和 接口 层 。 在 Chromium 项 目 中 ， 为 了 网 页 浏 
览 环境 的 安全 性 和 稳定 性 原因 考虑 而 引入 了 跨 进程 的 架构 后 ，WebKit 
开源 项 目 也 一 直 希 望 加 入 这 方面 的 支持 。 可 惜 ， 这 个 特性 一 直 没 有 被 
加 入 到 WebKit 项 目 中 来 。 


在 2010 年 4 月 ， 苹 果 宣 布 了 WebKit2， 目 标 就 是 抽象 出 一 组 新 的 编 
程 接口 ， 该 接口 和 调用 者 代码 与 网 页 的 泻 染 工作 代码 不 在 同一 
程 ， 这 显然 有 了 Chromium 多 进程 的 优点 ， 但 是 与 此 同时 ，WebKit2 接 
口 的 使 用 者 不 需要 理解 和 接触 背后 的 多 进程 和 进程 间 通 信 等 复杂 机 
制 ，WebKit2 部 分 代码 也 属于 WebKit 项 目 。 图 1-7 显 示 的 是 WebKit2 的 
进程 结构 模型 ， 可 以 看 出 : 至 少 有 两 个 进程 ， 其 一 是 UI 进程 ， 也 是 
WebKit2 绑 定 和 接口 层 所 在 的 进程 ， 也 就 是 浏览 器 或 者 web 平台 的 UI 进 
te; 其 二 是 Web 进程 ， 也 就 是 网 页 泻 染 所 在 的 进程 。 


浏览 器 或 Web 平台 


UI 进程 
WebKit2 接口 


进程 通信 桩 


WebKit 
项 目 
进程 通信 桩 


图 1-7 WebKit2 进 程 结构 


Web 进程 


WebKit2 的 具体 内 部 抽象 和 实现 情况 ， 以 及 和 Chromium 进 程 架 构 
的 比较 将 会 在 第 3 章 做 详细 介绍 。 


1.3.3 ”Chromium 内 核 : Blink 


历史 总 是 惊人 的 相似 ， 当 年 发 生 在 KHTML 项 目 上 的 事情 也 同样 
发 生 在 WebKit 项 目 上 。2013 年 4 月 (又 是 4 月 ) ，Google 宣 布 了 从 
WebKit 复 制 出 来 并 独立 运作 的 Blink 项 目 ， 其 中 的 原因 也 是 一 言 难 尽 ， 
主要 还 是 Google 和 苹果 公司 有 了 一 些 分 歧 。 最 初 ，Blink 和 WebKit 没 有 
特别 大 的 不 同 ， 因 为 刚刚 从 WebKit 复 制 过 来 。 所 以 ， 本 书 基于 
Chromium 的 某 些 实现 来 讲解 WebKit 的 技术 内 幕 ， 也 没有 什么 特别 令 人 
吃惊 的 地 方 。 


在 二 者 “分 手 * 后 ，WebKit 将 与 Google Chromium 浏 览 器 相关 的 代码 
移 除 ， 同 时 ，Blink 将 除 Chromium 浏 览 器 需要 之 外 的 其 他 移植 的 代码 
都 删除 了 。 不 过 ， 可 以 预见 的 是 ， 二 者 以 后 的 差别 肯定 会 越 来 越 大 ， 
这 是 因为 Google 希 望 未 来 在 Blink 中 加 入 很 多 新 的 技术 ， 下 面 是 
Chromium 网 站 上 列 出 的 。 


其 一 ， 实 现 跨 进程 的 iframe。iframe 人 允 许 网 页 中 钦 入 其 他 页 面 ， 这 
存在 潜在 的 安全 问题 。 一 个 新 的 想法 就 是 为 iframe 创 建 一 个 单独 的 沙 
箱 进 程 。 该 部 分 的 介绍 在 第 12 章 展开 。 


其 二 ， 重 新 整理 和 修改 WebKit 关 于 网 络 方面 的 架构 和 接口 。 长 期 
以 来 ，WebKit 中 的 一 些 实现 是 以 Mac OS 平台 为 基础 的 ， 所 以 存在 某 些 
方面 的 限制 ，Blink 将 会 在 这 方面 做 比较 大 的 调整 。 


其 三 ， 一 个 更 为 胆 大 更 为 激进 的 想法 就 是 将 DOM 树 引入 JavaScript 
引擎 中 。 由 前 面 的 介绍 可 以 看 到 ， 目 前 DOM 和 JavaScript 引 擎 是 分 开 
的 ， 这 意味 着 JavaScript 引 擎 访问 DOM 树 需要 较 高 的 代价 。 笔 者 认为 这 
是 一 个 大 胆 而 又 具有 革命 性 的 尝试 ， 会 带 来 性 能 的 极 大 提升 ， 为 什么 
E? 原因 是 JavaScript 引 擎 访问 DOM 树 需要 额外 的 负担 ， 这 影响 了 访问 
速度 。 


其 四 ， 就 是 针对 各 种 技术 的 性 能 优化 ， 包 括 但 是 不 限于 图 形 、 
JavaScript5l 警 、 内 存 使 用 、 编 译 的 二 进 制 文件 大 小 等 。 


之 后 还 有 很 多 其 他 技术 会 被 逐渐 引入 ， 让 我 们 一 直 关 注 WebKit 和 
Blink 的 发 展 。 


1.4 KPAH 


这 是 一 本 介绍 WebKit (Blink) 内 部 机 制 的 书 ， 因 为 要 支持 完整 的 
浏览 器 功能 ， 同 样 需 要 浏览 器 部 分 的 实现 ， 所 以 本 书 实 际 上 是 基于 
WebKit 项 目 并 结合 Chromium 项 目 来 展开 的 。 全 书 都 是 先 介 绍 各 种 新 的 
HTML5 技 术 和 原理 ， 然 后 围绕 着 WebKit 是 如 何 支持 HTML5 技 术 ， 详 
细 介 绍 WebKit 的 工作 原理 ， 同 时 辅 以 Chromium 中 更 进一步 的 机 制 。 并 
且 在 介绍 某 些 部 分 时 ， 伴 随 着 HTML5 的 实践 。 


本 书后 续 将 分 十 四 个 章节 逐步 为 读者 深入 介绍 WebKit 的 内 部 工作 
机 制 ， 共 包含 基本 篇 共 六 章 和 高 级 篇 共 章 ， 其 中 基本 篇 主要 介绍 泻 染 
的 基本 模块 和 过 程 ， 高 级 篇 则 着 重 介 绍 HTML5 和 浏览 器 中 的 复杂 和 新 
颖 技术 ， 其 组 织 结构 如 下 。 


第 2 章 ， 着 重 剖 析 HITML 网 页 的 构成 和 结构 ， 通 过 对 它们 的 解释 来 
帮助 理解 WebKit 的 泻 染 过 程 。 


第 3 章 ， 描 述 WebKit 为 支持 泻 染 而 包含 的 基本 模块 和 架构 ， 同 时 
结合 Chromium 的 架构 和 实现 ， 来 理解 WebKit 的 组 成 和 浏览 器 的 组 成 结 
构 。 


从 第 4 章 开 始 ， 一 直到 第 7 章 ， 依 次 详细 描述 泻 染 过 程 中 的 各 个 阶 
段 及 其 工作 原理 。 


第 4 章 ， 介 绍 WebKit 的 网 络 和 资源 加 载 机 制 ， 以 及 资源 缓存 策 
略 。 同 时 ， 在 分 析 Chromium 多 进程 资源 加 载 和 全 新 网 络 栈 和 协议 基础 
上 ， 介 绍 一 些 HTML 网 页 高 效 的 资源 使 用 方法 。 


(0) 


第 5 章 ， 主 要 介绍 DOM 模 型 等 方面 的 技术 ， 并 且 描 述 WebKit 中 
HTML 解 释 器 和 DOM 内 部 表示 。 


第 6 章 ， 详 解 CSS 解 释 器 ， 并 描述 CSS3 的 新 功能 和 WebKit 的 支持 
情况 。 之 后 ， 分 析 WebKit 如 何 利 用 CSS 来 计算 布局 的 过 程 。 


第 7 章 ， 介 绍 目前 的 泻 染 方式 以 及 根据 网 页 结构 来 设计 支持 泻 染 的 
各 种 内 部 数据 表示 ， 包 括 RenderObject 树 和 RenderLayer 树 ， 最 后 详细 
展现 软件 泻 染 网 页 的 过 程 。 

从 第 8 章 ”开始 ， 进 入 高 级 篇 ， 笔 者 着 重 介绍 目前 的 一 些 新 技术 和 
实现 。 


第 8 章 ， 描 述 GPU 硬件 在 目前 泻 染 中 所 起 的 作用 。 现 代 浏 览 器 越 来 
越 依 赖 GPU 硬 件 加 速 泻 染 基 础 ， 特 别 是 HTML5 引 入 的 众多 标准 。 本 章 


展示 的 是 使 用 CPU 硬件 加 速 机 制 的 HTML5 功 能 ， 以 及 众多 支持 硬件 加 
速 的 模块 在 Chromium 中 是 如 何 工 作 的 。 


第 9 章 ， 专 注 于 现代 JavaScript 引 擎 的 介绍 ， 包 括 JavaScriptCore 和 
V85 引 擎 ， 描 述 它们 在 网 页 泻 染 中 的 作用 。 最 后 谈 一 谈 如 何 编写 高 性 能 
的 JavaScript 代 码 。 


第 10 章 ， 介 绍 浏览 器 中 的 插件 机 制 和 扩展 机 制 ， 包 括 WebKit 的 
NPAPI 插 件 机 制 、Chromium 浏 览 器 中 的 扩展 机 制 、PPAPI 机 制 和 
NativeClient 技术 ， 通 过 这 些 技 术 可 以 增加 JavaScript API 在 扩展 
JavaScript 语 言 中 的 能 力 。 


第 11 章 ， 专 注 于 WebKit 对 多 媒体 方面 的 支持 ， 包 括 音频 和 视频 。 
详解 WebKit 的 内 部 原理 和 对 最 新 的 HTML5 视 频 及 音频 的 支持 。 最 后 展 
示 是 新 颖 的 网 络 实时 通信 机 制 WebRTC 并 党 试 构建 一 个 新 的 例子 。 


第 12 章 ， 首 先 描 述 HTML 指 定 的 网 页 安全 规范 并 解释 WebKit 和 
Chromium 浏 览 器 的 应 对 之 策 ， 接 下 来 是 浏览 器 为 了 维护 自身 安全 所 作 
的 努力 。 


第 13 章 ， 移 动 领域 越 来 越 重 要 ，WebKit 在 移动 领域 的 地 位 举 足 轻 
重 。 本 章 描述 WebKit 支 持 移 动 领域 特定 的 功能 ， 同 时 也 包括 新 的 演 染 
机 制 。 


第 14 章 ， 详 解 WebKit 中 的 调试 模块 WebInspector， 包 括 结构 和 原 
理 等 。 之 后 ， 以 Chromium 的 开发 者 工具 (DevTools) 为 例 ， 实 践 如 何 
调试 网 页 的 正确 性 和 性 能 问题 ， 让 我 们 一 起 认识 调试 功能 的 强大 。 


第 15 章 ， 主 要 谈 一 谈 对 Web 未 来 发 展 的 看 法 和 目前 一 些 明 显 的 趋 
势 。 特 别 是 对 WebKit 的 多 用 途 化 和 HTML5 未 来 的 发 展 。 当 然 也 少不了 
目前 初 见 端倪 的 web 平台 和 Web 应 用 程序 ， 这 其 中 包括 PhoneGap、 
ChromeOS 等 。 


浏览 器 和 浏览 器 内 核 的 技术 远 不 止 这 些 ， 扩 展 到 Web 前 端 领域 ， 
还 有 众多 的 设备 接口 (Device API) 、Web Storage 等 存储 技术 、Web 
性 能 技术 等 ， 书 中 并 没有 一 一 介绍 ， 但 这 些 理解 起 来 其 实 可 以 参考 本 
书 介绍 的 知识 ， 有 兴趣 的 读者 可 以 做 进一步 的 研究 。 


第 2 章 HTML 网 页 和 结构 


HTML 网 页 是 利用 HTML 语言 编写 的 文档， 它 是 一 种 半 结 构 化 的 
数据 表现 方式 。 它 的 结构 特征 可 以 归纳 为 三 种 : 树 状 结构 、 层 次 结构 
和 框 结 构 ， 这 些 都 是 分 析 WebKit 引 擎 泻 染 网 页 的 基础 。 后 面 会 详细 描 
述 WebKit 引 擎 泻 染 网 页 的 详细 过 程 及 中 间 涉 及 的 WebKit 主 要 内 部 结构 
表示 。 


2.1 网 页 构成 
2.1.1 基本 元 素 和 树 状 结构 


简单 来 讲 ，HTML 网 页 就 是 一 种 使 用 HTML 语 言 撰写 的 文档 。 但 
是 ， 现 在 的 网 页 基本 上 都 是 动态 网 页 (Dynamic HTML) ， 也 就 是 网 
页 可 以 出 现 动画 ， 可 以 与 用 户 交 互 ， 这 就 需要 CSS 样 式 语 言 和 
JavaScript 语 言 。 在 这 样 的 动态 网 页 中 ，JavaScript 代 码 用 来 控制 网 页 内 
部 的 逻辑 ，CSS 用 来 描述 网 页 的 显示 信息 。 示 例 代 码 2-1 是 一 个 简单 但 
是 完整 使 用 这 些 技术 的 网 页 ， 如 果 读 者 感 兴 趣 的 话 ， 可 以 将 代码 保存 
到 一 个 文件 里 ， 并 尝试 在 浏览 器 中 打开 。 


示例 代码 2-1 ”一 个 简单 完整 的 HTML 网 页 
<html> <! --HTMLXÆ- -> 


<head> 


<style type="text/css"> <!--CSS 代 码 - -> 


img{width:100px; } 
</style> 
<title>This is a simple case.</title> 
</head> 
<body> 
<img src="apic.png"></img> <! - -图 片 资 源 - -> 
<div>Hello world!</div> 
<script type="text/javascript"> <!-- 
JavaScript {tf%- -> 
window. onload=function(){ 
console. log("window.onload()"); 
} 
console.log("It’s me."); 
</script> 
</body> 
</html> 


整个 网 页 可 以 看 成 一 种 树 状 结构 ， 其 树 根 是 "html”， 这 是 网 页 的 
RITA (MMR) 。 根 下 面 也 包含 两 个 子 节点 “head” 和 “body”。 
“head” 的 子女 “style” 包 含 的 就 是 一 段 CSS 代 码 ， 用 来 定义 元 素 的 样式 信 
ho 


CSS 是 一 种 样式 表 语 言 ， 用 来 描述 元 素 的 显示 信息 。 在 HIML 的 
早期 ， 内 容 和 显示 是 混在 一 起 的 ， 最 典型 的 例子 莫 过 于 使 用 table 元 素 
来 展示 数据 。 这 对 网 页 的 代码 结构 非常 不 利 。 因 为 ， 如 果 Web 开 发 者 
想 修改 数据 的 显示 方式 ， 也 要 修改 数据 本 身 ， 会 很 麻烦 。 有 鉴于 此 ， 
借鉴 数据 和 显示 分 离 的 原理 ， 规 范 设计 者 们 可 以 将 有 关 显 示 的 信息 例 


如 颜色 、 大 小 、 字 体 等 抽取 出 来 ， 使 用 CSS 语 言 编写 代码 来 描述 它 
们 ， 与 HTML 元素 的 内 容 分 离开 来 。 


“body” 节 点 下 面包 含 三 个 子 节 点 ， 其 一 是 “img”* 节 点 ， 用 来 在 网 页 
中 显示 图 片 资源 ; 其 二 是 “div”* 节 点 ; 其 三 是 “script”* 节 点 ， 它 包括 一 段 
JavaScript 代 码 。 


JavaScript 是 一 种 解释 型 的 脚本 语言 ， 主 要 目的 是 控制 用 户 端 逻 
辑 、 同 用 户 交 互 等 ， 它 可 以 修改 HTML 元 素 及 其 内 容 。 该 语言 是 由 网 
景 发 明 ， 后 被 微软 来 用 ， 虽 然 只 是 EMCAScript 标 准 的 一 种 实现 ， 但 是 
绝 大 多 数 浏览 器 都 支持 它 。 现 在 ，JavaScript 语 言 越 来 越 重 要 ， 不 仅 被 
广泛 使 用 ， 更 是 把 工作 领域 拓展 到 了 服务 器 端 


由 上 面 的 分 析 可 以 看 出 ， 一 个 完整 的 网 页 组 成 包括 HTML 文 本 、 
JavaScript 代 码 、CSS 代 码 aes 的 资产 pallet 网 络 上 的 每 个 资 
源 都 是 由 URL(Unified Resource Locator) 标 记 的 ， 它 是 URI (Unified 
Resource Identifier) 的 一 种 实现 。 这 表明 对 于 浏览 ， 区 分 两 个 
资源 是 否 相同 的 唯一 标准 就 是 它们 的 URL 是 否 一 致 。 


示例 代码 2-1 中 的 这 些 元 素 组 成 一 个 树 状 结构 ， 这 就 是 HTML 文 档 
的 树 状 结构 。 在 WebKit 中 ， 这 个 文档 会 构建 成 一 个 DOM 树 ， 这 在 第 5 
章 会 做 详细 介绍 。 


2.1.2 HTML5 新 特性 


在 第 1 章 中 ， 我 们 介绍 了 HTML5 在 10 个 大 类 别 上 对 Web 前 端 领域 
引入 的 全 新 功能 。 本 节 让 我 们 一 起 探讨 HTML5 新 特性 中 对 网 页 结构 可 


能 产生 比较 大 影响 的 那些 功能 。 


HTML5 引 入 的 最 让 人 惊讶 的 最 新 能 力 之 一 是 对 2D 和 3D 图 形 以 及 
多 媒体 方面 的 支持 ， 这 将 彻底 改变 网 页 的 泻 染 方 式 和 复杂 度 。 这 里 包 
括 但 是 不 限于 HIML5 视 频 、Canvas 2D, WebGL (也 就 是 Canvas 
3D) ， 以 及 CSS3 3D 变 换 (transform) 和 转换 (transition) o HTML5 
视频 引入 了 一 个 新 的 “video" 元 素 ， 支 持 在 网 页 中 播放 视频 。Canvas2D 
通过 定义 一 个 新 的 “canvas” 元 素 ， 网 页 开发 者 利用 该 元 素 的 2D 绘 图 上 
下 文 (graphics context) 调用 标准 定义 的 接口 ， 绘 制 常见 的 2D 图 形 ， 
例如 点 、 线 、 和 矩形 、 多 边 形 等 。WebGL 则 是 使 用 "canvas” 元 素 ， 网 页 
开发 者 可 以 利用 该 元 素 的 3D 绘 图 上 下 文 调用 标准 定义 的 接口 ， 绘 制 3D 
图 形 ， 这 些 接口 类 似 于 OpenGL ES 的 接口 。CSS 3D 的 变换 和 转换 则 可 
以 作用 于 HTML 的 任意 可 视 元 素 ， 制 造 出 各 种 炫丽 的 3D 效 果 。 


想象 一 下 ， 如 果 网 页 开发 者 之 前 想 要 在 网 页 上 绘制 动态 2D、3DD 轿 
形 或 者 播放 视频 ， 浏 览 器 本 身 还 不 是 很 容易 办 到 。 通 常 的 做 法 是 ， 利 
用 浏览 器 提供 的 插件 来 支持 它们 ， 例 如 Flash 插 件 。 但 是 ， 现 在 HTML5 
标准 已 经 包含 这 些 功能 了 ， 也 就 是 说 ， 进 入 HTML5 时 代 后 ， 多 媒体 和 
2D/3D 图 形变 成 了 “第 一 等 公民 ”*， 浏 览 器 原生 支持 它们 ， 而 不 需要 借 
助 于 第 三 方 插件 。 读 者 可 能 还 没有 理解 “第 一 等 公民 ”的 含义 ， 因 为 这 
看 起 来 好 像 没 有 什么 大 的 不 同 。 


事实 上 ， 这 的 确 很 不 一 样 ， 因 为 视频 、3D 图 形 等 和 其 他 普通 
HTML 元 素 一 样 ， 可 以 被 赋予 同样 的 样式 和 操作 。HTML5 不 仅 支 持 这 
些 第 三 方 插件 所 提供 的 能 力 ， 而 且 其 功能 更 为 强大 ， 因 为 除了 创建 
HTML 元 素 并 可 以 在 它 上 面 绘制 2D、3D 图 形 之 外 ， 甚 至 还 可 以 将 3D 的 
变化 和 动画 效果 作用 于 任意 HTML 元 素 之 上 ， 包 括 视 频 等 。 


如 果 读 者 有 点 迷惑 ， 那 很 正常 ， 下 面 通 过 例子 来 说 明 其 中 的 含 
义 。 示 例 代 码 2-2 是 一 个 使 用 了 CSS3 3D 变 换 、HTML5 视 频 、2D 图 形 
绘制 和 3D 图 形 绘制 的 示例 网 页 代码 。 


示例 代码 2-2 ”使 用 HTML5 新 功能 视频 、2D 和 3D Canvas 的 网 页 代码 


<html> 
<head> 
<style type="text/css"> 
video, div, canvas{ 
-webkit-transform:rotateY(30deg) rotateXx(-45deg); 
<!--CSS 3D 变 换 - -> 
} 
</style> 
</head> 
<body> 
<video src="avideo.mp4"></video> <!--HTMLS 
video- -> 
<div> 


<canvas id="a2d"></canvas><br> <!--HTML5 canvas- 


<canvas id="a3d"></canvas> <!--HTML5 
canvas- -> 
</div> 
<script type="text/javascript"> 


var size=300; 


//canvas 2D 绘 图 
var 
a2dCtx=document.getElementById('a2d').getContext('2d'); 
a2dCtx.canvas.width=size; 
a2dCtx.canvas.height=size; 
a2dctx.fillStyle="rgba(0,192,192,80)"; 
a2dCtx.fillRect(0, ©, 200, 200); 


//canvas 3d, e.g. web6GL 绘 图 
var 
a3dCtx=document.getElementById('a3d').getContext('experimental- 
webgl'); 
a3dCtx.canvas.width=size; 
a3dCtx.canvas.height=size; 
a3dCtx.clearColor(0.0, 192.0/255.0, 192.0/255.0, 
80.0/255.0); 
a3dCtx.clear(a3dCtx.COLOR_BUFFER_BIT); 
</script> 
</body> 
</html> 


在 CSS 3D 变 换 的 代码 部 分 ， 将 3D 变 换 作 用 于 “video”、 “div” Al 
“canvas” 三 种 元 素 ， 其 含义 是 将 它们 分 别 绕 X 轴 和 YY 轴 旋 转 30? 和 -45?。 
在 元 素 “body” 的 子女 中 ， 首 先是 “video” 元 素 ， 它 用 来 播放 HTML5 视 
频 。 之 后 是 一 个 “div” 元 素 ， 它 包括 两 个 “canvas” 元 素 ， 前 者 将 会 用 来 
绘制 2D 图 形 ， 后 者 将 会 用 来 绘制 3D 图 形 ， 当 然 目 前 泻 染 引 擎 区 分 不 出 


是 2D 还 是 3D ， 因 为 它们 是 由 后 面 的 JavaScript 代 码 决 定 的 。 在 “canvas 
2D 绘 图 ”的 JavaScript 代 码 中 ，ID 为 “a2d” 的 “canvas” 元 素 创 建 2D 上 下 
文 ， 这 决定 了 它 将 采用 2D 绘 图 ， 之 后 填充 该 元 素 的 颜色 。 在 “canvas 
3d (webGL 绘 图 ) ”的 JavaScript 代 码 中 ，ID 为 “a3d” 的 “canvas” 元 素 创 
建 3D 上 下 文 ， 这 决定 了 它 将 采用 3D 绘 图 ， 之 后 更 新 它 的 颜色 缓冲 区 。 


在 刚刚 简单 的 示例 代码 2-2 中 ， 就 使 用 了 HTML5 的 这 些 新 功能 ， 
读者 可 以 尝试 看 看 这 些 代码 的 效果 ， 当 然 ， 建 议 使 用 Google 的 Chrome 


浏览 器 。 


2.2 ”网 页 结构 
2.2.1 ERG 


框 结 构 很 早 就 被 引入 网 页 中 ， 它 可 以 用 来 对 网 页 的 布局 进行 分 
割 ， 将 网 页 分 成 几 个 框 。 同 时 ， 网 页 开发 者 也 可 以 让 网 页 家 入 其 他 的 
网 页 。 在 HIML 的 语法 中 , “frameset”, “frame” M “iframe” FJ AARE 
当前 网 页 中 罕 入 新 的 框 结构 ， 这 里 就 不 具体 介绍 语法 了 ， 有 兴趣 的 读 
者 请 自行 查阅 相关 文档 。 


每 一 个 框 结构 包含 一 个 HTML 文 档 ， 最 简单 的 框 结构 网 页 就 是 单 
一 的 框 ， 其 文档 没有 包含 任何 其 他 的 框 。 例 如 示例 代码 2-1 的 网 页 就 是 
一 个 单一 的 框 (用 虚线 表示 ， 下 同 ) ， 框 中 包含 的 文档 就 是 HTML 文 
档 (用 实 线 表示 ， 下 同 ) ， 如 图 2-1 所 示 。 


图 2-1 示例 代码 2-1 中 的 网 页 对 应 的 框 结构 


网 页 也 可 以 有 很 复杂 的 框 结构 ， 也 融 是 框 里 面 再 验 入 框 ， 依 次 类 
推 。 下 面 让 我 们 来 看 一 个 拥有 复杂 框 结构 的 网 页 。 


图 2-2 的 左边 部 分 是 两 个 HTML 网 页 的 示例 代码 ， 其 中 “main.html” 
是 主 网 页 ， 它 使 用 “iframe” 元 素来 窜 入 左下 方 的 “frameset.html” 网 页 。 
而 “frameset.html” 网 页 则 包含 两 个 子 框 ， 分 别 藤 入 两 个 结构 简单 的 网 
页 。 图 中 右 侧 则 是 左边 “main.html* 网 页 所 生成 的 框 结 构 ， 可 以 说 相当 
复杂 。 图 中 的 箭头 表示 源 代码 和 框 结构 的 对 应 关系 ， 相 信 读 者 可 以 一 
目 了 然 。 对 于 图 中 使 用 到 的 “examplel1.html* 和 “example2.html”， 这 里 
没有 给 出 ， 可 以 把 它们 看 成 类 似 于 示例 代码 2-1 的 网 页 和 结构 。 


<!-- 这 是 main.html--> 


<html> 


<iframe src="frameset .html"></iframe> 7 
<div>Place Holder</div> 


</html> 


<!-- 这 是 frameset.htm1L--> 


<html> 
<frameset rows="50%,50%"> F 
<frame src="example2.html"></frame> L 
<frame srco="examplel.html"></frame> 
</frameset> 


</html> 


图 2-2 ”多 框 结构 的 网 页 


虽然 多 框 结构 的 网 页 非常 不 适合 移动 领域 ， 因 为 该 结构 对 触 控 操 
作 来 说 的 确 是 一 场 灾 难 ， 但 是 它 依然 存在 ， 而 且 在 传统 桌面 系统 中 被 
广泛 使 用 ， 笔 者 将 在 第 5 章 中 介绍 WebKit 是 如 何 支 持 框 结构 的 。 


2.2.22 ”层次 结构 


前 一 节 介 绍 了 网 页 的 框 结构 ， 那 么 对 于 框 结构 中 的 文档 ， 它 的 结 
构 如 何 呢 ? 本 节 将 介绍 网 页 文档 的 层次 结构 。 理 解 层次 结构 非常 重 
要 ， 因 为 它 可 以 帮助 你 理解 WebKit 如 何 构建 它 并 依赖 它 来 泻 染 ， 这 有 
助 于 撰写 高 效 的 HTML5 代 码 。 


网 页 的 层次 结构 是 指 网 页 中 的 元 素 可 能 分 布 在 不 同 的 层次 中 ， 也 
就 是 说 某 些 元 素 可 能 不 同 于 它 的 父 元 素 所 在 的 层次 ， 因 为 某 些 原因 ， 
WebKit 需 要 为 该 元 素 和 它 的 子女 建立 一 个 新 层 。 下 面 以 示例 代码 2-2 中 
的 代码 来 作为 分 析 网 页 层次 结构 的 示例 网 页 。 


之 前 笔者 也 做 过 说 明 ， 示 例 代 码 2-2 中 有 四 个 重要 的 元 素 ， 那 就 是 
一 个 “video” 元 素 ， 一 个 “div” 元 素 和 两 个 “canvas” 元 素 。 同 时 还 要 注意 
到 的 是 CSS 部 分 的 代码 ， 它 也 会 对 网 页 的 分 层 策 略 产 生 重要 影响 。 
2-3 就 是 示例 代码 2-2 对 应 的 网 页 层次 结构 ， 让 我 们 一 一 剖析 它们 。 


图 2-3 ”网 页 的 层次 结构 


首先 是 图 中 最 大 的 层 ， 这 里 我 们 姑且 称 之 为 “ 根 层 ”， 当 一 个 网 页 
构建 层次 结构 的 时 候 ， 首 先是 根 节点 ， 此 时 自然 地 为 它 创建 一 个 层 ， 
这 就 是 “ 根 层 ”， 所 以 ， 它 其 实 对 应 着 整个 网 页 文档 对 象 。 那 么 对 于 示 
例 代 码 2-1 而 言 ， 它 实际 上 只 有 “ 根 层 ”， 没 有 其 他 层 ， 这 是 网 页 包含 的 
元 素 决 定 的 。 


其 次 认识 一 下 图 中 的 “ 层 1”， 它 是 为 元 素 “video” 所 创建 的 层 。 那 为 
什么 “video” 元 素 需 要 新 创建 一 个 层 ， 而 不 是 使 用 它 的 父亲 所 在 的 层 
Ne? 这 是 因为 “video” 元 素 用 来 播放 视频 ， 为 它 创建 一 个 新 的 层 可 以 更 
有 效 地 处 理 视频 解码 器 和 浏览 器 之 间 的 交互 和 泻 染 问题 ， 见 第 11 章 。 


再 次 ， 看 一 下 图 中 的 “ 层 2”， 它 所 对 应 的 是 示例 代码 2-2 中 的 元 素 
“div”。 接 触 过 HTML 的 读者 应 该 知道 ， 它 其 实 是 一 个 非常 普通 的 元 
素 。 而 且 上 面 我 们 也 说 到 了 示例 代码 2-1 只 有 “ 根 层 ”， 但 是 它 也 包含 
“div” 元 素 。 这 是 为 什么 呢 ? 答案 是 因为 示例 代码 2-2 中 的 “div” 元 素 需 
要 进行 3D 变 换 。 


最 后 ， 图 中 还 有 两 个 层 一 一 “ 层 3” 和 “ 层 4”， 它 们 分 别 对 应 示例 代 
码 2-2 中 的 两 个 元 素 “canvas”。 两 个 元 素 对 应 着 HTML5 标 准 中 复杂 的 2D 
和 3D 绘 图 操作 。 


相信 读者 也 注意 到 了 图 中 各 层 的 前 后 关系 。“ 根 层 ” 在 最 后 面 ,，“ 层 
3” 和 “ 层 4” 在 最 前 面 。 从 上 面 的 分 析 中 ， 我 们 不 难看 出 ， 对 于 需要 复杂 
变换 和 处 理 的 元 素 ， 它 们 需要 新 层 ， 所 以 ，WebKit 为 它们 构建 新 层 其 
实 是 为 了 泻 染 引擎 在 处 理 上 的 方便 和 高 效 (后 面 我 们 能 够 看 到 ) 。 


那么 ， 哪 些 元 素 或 者 说 哪些 情况 下 ， 会 产生 新 的 层 呢 ? 对 于 不 同 
的 泻 染 引擎 ， 它 们 的 策略 可 能 是 不 一 样 的 。 哪 怕 都 是 WebKit 泻 染 引 
擎 ， 对 于 不 同 的 基于 WebKit 的 浏览 器 ， 分 层 策略 也 有 可 能 不 一 样 。 那 
是 否 意 味 了 这 个 问题 无 解 了 ? 当然 不 是 ， 通 常 来 讲 ， 它 是 有 一 些 基本 
原则 的 。 比 如 示例 中 的 这 些 元 素 ，WebKit 一 般 都 会 为 它们 创建 新 层 。 
在 第 7 章 中 ， 笔 者 会 详细 介绍 WebKit 和 Chromium 如 何 处 理 分 层 问题 。 


2.2.3 XBR: 理解 网 页 结构 
2.2.3.1 ”实践 1: 框 结构 


为 了 理解 框 结 构 ， 读 者 可 以 将 图 2-2 的 网 页 “main.html” 和 
“framesethtml 的 代码 分 别 保存 到 对 应 的 文件 中 ， 然 后 使 用 Chrome 浏 


HWE 


览 器 打开 <*main.html" 网 页 ， 就 可 以 看 到 图 2-4 中 的 泻 染 结果 (当然 ， 还 


7^9 


E E “examplel.html” H “example2.html” WNR, XERA ATR GE 
码 2-1 和 2-2 分 别 保存 为 它们 ， 或 者 自行 构造 任何 网 页 ) 。 


ERE 


HE 2 


图 2-4 ”示例 网 页 的 框 结构 图 


我 们 将 图 2-2 中 的 框 和 网 页 泻 染 结果 中 的 区 域 关 联 起 来 。“ 框 2 对 
应 的 自然 是 “examplelhtml 的 泻 染 结果 ,，“ 框 3 对 应 的 自然 是 
“example2.html”* 的 泻 染 结果 。“ 框 1* 是 它们 的 父亲 “frameset.html”， 而 
主 框 则 是 整个 网 页 的 结果 。 


2.2.3.2 ”实践 2 : 层次 结构 


结合 示例 代码 2-2 和 它 对 应 的 层次 结构 图 2-3， 让 我 们 在 Chrome 浏 
览 器 中 观察 网 页 的 层次 结构 。 


1. 用 浏览 器 打开 示例 代码 2-2 的 网 页 ， 然 后 打开 Chrome 浏 览 器 的 开 
发 者 工具 。 

2. 单 击 开发 者 工具 右 下 角 的 “设置 "按钮 。 

3. 在 “General” 标 签 页 里 的 选项 <Show composited layer borders” 前 打 
To 

4. 页 面 中 将 会 显示 网 页 的 层次 结构 ， 如 图 2-5 中 左 侧 的 图 片 所 示 。 


当 用 户 操作 步骤 三 时 ，Chrome 会 为 每 个 层次 《其 实 是 为 图 形 层 ， 
但 是 这 里 可 以 近似 等 价 于 本 章 的 层次 分 析 ， 第 8 章 会 分 析 两 者 的 联系 和 
差别 ) 的 边界 画 上 一 个 框 ， 用 以 标记 它们 。 如 图 2-5 所 示 ， 其 中 包含 很 
多 的 实 线 框 ， 它 们 是 层 的 边界 。 


图 2-5 示例 代码 2-1 网 页 的 层次 结构 


我 们 将 结果 同 层次 结构 图 2-3 对 应 起 来 ， 以 便于 直观 地 理解 。“ 层 
1 和“ 层 2” 被 设置 3D 变 换 ， 所 以 边框 成 平行 四 边 形 ， 而 不 是 “ 根 层 ” 的 和 矩 
形状 。 同 理 ，“ 层 3” 和 “ 层 4” 也 被 设置 3D 变 换 ， 但 是 发 现 角 度 比 “ 层 2” 更 
大 ， 原 因 在 于 3D 变 换 的 苇 加 效应 。 回 顾 示例 代码 2-2 可 以 发 现 ， 两 个 
“canvas” 元 素 本 身 需 要 进行 3D 变 换 ， 同 时 它们 的 父亲 “div” 元 素 也 需 
要 ， 两 者 到 加 ， 出 现 了 图 中 所 示 的 状况 。 


细心 的 读者 也 许 会 发 现 “ 根 层 ” 中 包含 很 多 大 小 一 样 的 方块 ， 同 
时 , “ 层 2? 也 是 一 样 ， 这 是 WebKit 故 意 将 它们 划分 成 小 块 的 瓦 片 所 致 ， 
这 些 都 会 在 第 8 章 中 得 到 解释 。 


有 兴趣 的 读者 可 以 尝试 修改 网 页 的 代码 ， 看 看 都 会 发 生 些 什么 。 
同时 ， 还 可 以 尝试 一 下 示例 代码 2-1 所 表示 的 网 页 ， 然 后 依照 上 面 的 步 
又 ， 碍 看 一 下 网 页 的 层次 结构 ， 比 较 一 下 该 层次 结构 跟 图 2-5 有 什么 不 
同 。 


2.3 “WebKit 的 网 页 泻 染 过 程 
2.3.1 加载 和 泻 染 


浏览 器 的 主要 作用 就 是 将 用 户 输入 的 “URL” 转 变 成 可 视 化 的 图 
像 。 按 照 某 些 文档 的 分 析 ， 这 其 中 包含 两 个 过 程 ， 其 一 是 网 页 加 载 过 
程 ， 就 是 从 “URL” 到 构建 DOM 树 ;其 二 是 网 页 泻 染 过 程 ， 从 DOM 树 
到 生成 可 视 化 图 像 。 其 实 ， 这 两 个 过 程 也 会 交叉 ， 很 难 给 予 明 确 的 区 
分 ， 所 以 ,为 了 简单 起 见 ， 本 书 统称 这 两 个 过 程 为 网 页 的 泻 染 过 程 。 


网 页 演 染 还 有 一 个 特性 ， 那 就 是 网 页 通 瘦 比 我 们 的 屏幕 可 视 面 积 
要 大 〈 在 移动 设备 上 尤其 明显 ) ， 而 当前 可 见 的 区 域 ， 我 们 称 为 视图 
(viewport) ， 这 一 概念 后 面 会 详细 介绍 和 频繁 使 用 到 。 因 为 网 页 比 
可 视 区 域 大 ， 所 以 浏览 器 在 泻 染 网 页 的 时 候 ， 一 般 会 加 入 滚动 条 以 帮 
助 翻滚 网 页 。 就 用 户 体验 来 说 ， 重 直方 向 滚动 效果 好 于 水 平方 向 。 


2.3.2 ”WebKit 的 泻 染 过 程 


第 1 章 介绍 过 网 页 的 一 般 泻 染 过 程 ， 这 里 笔者 重点 前 述 WebKit 中 
的 具体 模块 以 及 在 泻 染 过 程 中 的 作用 ， 让 读者 对 WebKit 有 个 全 局 性 的 
了 解 ， 这 其 中 的 每 个 细节 都 会 在 后 面 的 章节 逐步 展开 。 


让 我 们 回顾 一 下 这 个 过 程 中 的 数据 和 模块 ， 数 据 包 括 网 页 内 容 、 
DOM、 内 部 表示 和 图 像 ， 模 块 则 包括 HTML 解 释 器 、CSS 解 释 器 、 
JavaScript 引 | 擎 以 及 布局 和 绘图 模块 。 下 面 深 入 这 些 模块 并 对 它们 做 进 
一 步 的 细 化 。 


根据 数据 的 流向 ， 这 里 将 泻 染 过 程 分 成 三 个 阶段 ， 第 一 个 阶段 是 
从 网 页 的 URL 到 构建 完 DOM 树 ， 第 二 个 阶段 是 从 DOM 树 到 构建 完 
WebKit 的 绘图 上 下 文 ， 第 三 个 阶段 是 从 绘图 上 下 文 到 生成 最 终 的 图 
像 。 


为 了 描述 这 个 过 程 ， 下 面 笔 者 会 将 WebKit 中 的 一 些 细节 展示 给 大 
家 ， 可 能 其 中 一 些 对 读者 来 说 很 随 生 ， 不 过 没关系 ， 笔 者 会 逐步 来 分 
析 它 们 。 图 2-6 显 示 的 是 将 演 染 过 程 分 为 三 个 阶段 的 示意 图 ， 主 要 是 针 
对 WebKit 中 的 逻辑 来 描述 的 。 


| 网 页 URL 


种 资源 
网 络 模块 


JavaScript 


PIETERA: E DOM 树 


引擎 


图 2-6 ”从 网 页 URL 到 DOM 树 


图 2-6 描 述 的 是 从 网 页 URL 到 构建 完 DOM 树 这 个 过 程 ， 数 字 表 示 
的 是 基本 顺序 ， 当 然 也 不 是 严格 一 致 ， 因 为 这 个 过 程 可 能 重复 并 且 可 


能 交叉 。 
具体 的 过 程 如 下 。 


1. 当 用 户 输 入 网 页 URL 的 时 候 ，WebKit 调 用 其 资源 加 载 器 加 载 该 
URL 对 应 的 网 页 。 

2. 加 载 器 依赖 网 络 模 块 建立 连接 ， 发 送 请 求 并 接收 答复 。 

3. WebKit 接 收 到 各 种 网 页 或 者 资源 的 数据 ， 其 中 某 些 资源 可 能 是 同 
步 或 异步 获取 的 。 

4. 网 页 被 交 给 HTML 解 释 器 转变 成 一 系列 的 词语 (Token) o 


5. 解释 器 根据 词语 构建 节点 (Node) ， 形 成 DOM 树 。 

6. 如 果 节 点 是 JavaScript 代 码 的话 ， 调 用 JavaScript 引 擎 解 释 并 执行 。 

7. JavaScript 代 码 可 能 会 修改 DOM 树 的 结构 。 

8. 如 果 节 点 需要 依赖 其 他 资源 ， 例 如 图 片 、CSS、 视 频 等 ， 调 用 资 
源 加 载 器 来 加 载 它 们 ， 但 是 它们 是 异步 的 ， 不 会 阻碍 当前 DOM 树 
的 继续 创建 ;如 果 是 JavaScript 资 源 URL (没有 标记 异步 方式 ) ， 
则 需要 停止 当前 DOM 树 的 创建 ， 直 到 JavaScript 的 资源 加 载 并 被 
JavaScript 引 擎 执行 后 才 继 续 DOM 树 的 创建 。 


在 上 述 的 过 程 中 ， 网 页 在 加 载 和 泻 染 过 程 中 会 发 出 “DOMConent” 
事件 和 DOM 的 “onload” 事 件 ， 分 别 在 DOM 树 构建 完 之 后 ， 以 及 DOM 
树 建 完 并 且 网 页 所 依赖 的 资源 都 加 载 完 之 后 发 生 ， 因 为 某 些 资源 的 加 
载 并 不 会 阻碍 DOM 树 的 创建 ， 所 以 这 两 个 事件 多 数 时候 不 是 同时 发 生 
的 。 


接 下 来 就 是 WebKit 利 用 CSS 和 DOM 树 构建 RenderObject 树 直到 绘 
图 上 下 文 ， 如 图 2-7 所 示 的 过 程 。 


RenderObject 树 
RenderLayer 树 
绘图 上 下 文 


图 2-7 ”从 CSS 和 DOM 树 到 绘图 上 下 文 


布局 计算 


这 一 阶段 的 具体 过 程 如 下 。 


1. CSS 文 件 被 CSS 解 释 器 解释 成 内 部 表示 结构 。 

2. CSS 解 释 器 工作 完 之 后 ， 在 DOM 树 上 附加 解释 后 的 样式 信息 ， 这 
就 是 RenderObject 树 。 

3. RenderObject 节 点 在 创建 的 同时 ，WebKit 会 根据 网 页 的 层次 结构 
创建 RenderLayer 树 ， 同 时 构建 一 个 虚拟 的 绘图 上 下 文 。 其 实 这 中 
间 还 有 复杂 的 内 部 过 程 ， 具 体 在 后 面 专门 的 章节 做 详细 介绍 。 


RenderObject 树 的 建立 并 不 表示 DOM 树 会 被 销毁 ， 事 实 上 ， 上 述 
图 中 的 四 个 内 部 表示 结构 一 直 存 在 ， 直 到 网 页 被 销毁 ， 因 为 它们 对 于 
网 页 的 泻 染 起 了 非常 大 的 作用 。 


最 后 就 是 根据 绘图 上 下 文 来 生成 最 终 的 图 像 ， 这 一 过 程 主要 依赖 
2D 和 和 3D 图形 库 ， 如 图 2-8 所 示 。 


绘图 上 下 文 


2D 图 形 库 


~ 


A 


绘图 具体 实 
现 类 


3D 图 形 库 


最 终 的 图 像 
图 2-8 ”从 绘图 上 下 文 到 最 终 的 图 像 
图 中 这 一 阶段 对 应 的 具体 过 程 如 下 。 


. 绘图 上 下 文 是 一 个 与 平台 无 关 的 抽象 类 ， 它 将 每 个 绘图 操作 桥接 
到 不 同 的 具体 实现 类 ， 也 就 是 绘图 具体 实现 类 。 

. 绘图 实现 类 也 可 能 有 简单 的 实现 ， 也 可 能 有 复杂 的 实现 。 在 
Chromium 中 ， 它 的 实现 相当 复杂 ， 需 要 Chromium 的 合成 器 来 完 
成 复杂 的 多 进程 和 GPU 加 速 机 制 ， 这 在 后 面 会 涉及 。 

绘图 实现 类 将 2D 图 形 库 或 者 3D 图 形 库 绘 制 的 结果 保存 下 来 ， 交 给 
浏览 器 来 同 浏览 器 界面 一 起 显示 。 


=. 


N 


这 一 过 程 实际 上 可 能 不 像 图 中 描述 的 那么 简单 ， 现 代 浏 览 器 为 了 
绘图 上 的 高 效 性 和 安全 性 ， 可 能 会 在 这 一 过 程 中 引入 复杂 的 机 制 。 而 
且 ， 绘 图 也 从 之 前 单纯 的 软件 泻 染 ， 到 现在 的 GPU 硬 件 泻 染 、 混 合演 
染 模 型 等 方式 ， 这 些 同样 会 以 单独 的 章节 加 以 剖析 。 


上 面 介绍 的 是 一 个 完整 的 泻 染 过 程 。 现 代 网 页 很 多 是 动态 网 页 ， 
这 意味 着 在 泻 染 完 成 之 后 ， 由 于 网 页 的 动画 或 者 用 户 的 交互 ， 浏 览 
其 实 一 直 在 不 停 地 重复 执行 泻 染 过 程 。 


2.3.3 ”实践 : 从 网 页 到 可 视 化 结 


让 笔者 以 示例 代码 2-1 中 的 网 页 为 例 说 明 浏览 器 如 何 从 用 户 输 入 
URL (下 面 的 例子 中 是 “examplel.html”) 开始 到 最 后 生成 可 视 化 结果 
的 过 程 。 


先 解释 第 一 阶段 一 一 从 网 页 的 URL 到 构建 完 DOM 树 。 方 法 也 很 简 
单 ， 步 又 如 下 。 


首先 ， 打 开 Chrome 浏 览 器 的 开发 者 工具 ， 单 击 “Network” 按 钮 。 


其 次 ， 输 入 网 页 的 URL， 可 以 看 到 如 图 2-9 的 界面 ( 除 掉 三 个 文本 
框 “ 资 源 加 载 * 等 ) 。 


资源 加 载 
DOMContentLoaded onLoad 


事件 触发 事件 触发 


example1.html 


图 2-9 ”资源 加 载 和 DOM 树 的 建立 


图 中 的 上 半 部 分 是 网 页 的 泻 染 结果 ， 下 半 部 分 是 Chrome 开 发 者 工 
具 显 示 的 网 页 加 载 的 结果 。 从 中 可 以 看 出 ， 该 网 页 包含 两 个 资源 ， 一 
个 是 主 HTML 页 面 ， 另 一 个 是 “apic.png” 的 图 片 。 加 载 它们 的 顺序 当然 
是 先 HTML 页 面 ， 然 后 是 图 片 。 这 其 中 读者 可 以 看 到 两 条 竖 线 。 左 侧 
的 竖 线 表示 DOM 已 经 创建 完成 ， 右 侧 竖 线 表示 资源 都 加 载 完 成 ， 图 中 
可 以 看 到 右 侧 竖 线 是 在 图 片 加 载 完 一 段 时 间 之 后 出 现 的 。 右 侧 竖 线 之 
后 ， 第 一 阶段 即 告 完成 。 

接 下 来 是 第 二 阶段 和 第 三 阶段 ， 它 们 在 下 面 被 一 起 描述 。 同 样 以 
示例 代码 2-1 的 网 页 为 例 加 以 说 明 。 如 图 2-10 所 示 ， 得 到 示意 图 的 步骤 
如 下 。 


第 一 阶段 第 二 阶段 第 三 阶段 


60 FPS 


Al E Loading W Scripting 国 Rendering 国 Painting 2of2frames shown (ava: 14.000 ms, a: 2.000 ms) 党 


图 2-10 ”网 页 泻 染 的 全 过 程 细 分 图 


首先 ， 打 开 Chrome 浏 览 器 并 输入 示例 网 页 的 URL。 


其 次 ， 打 开 Chrome 浏 览 器 的 开发 者 工具 ， 单 击 “Timeline” 按 钮 ， 
它 表 示 的 是 根据 时 间 来 获取 网 页 泻 染 的 动作 过 程 。 

再 次 ， 单 击 最 下 面 一 栏 的 *e” 按 钮 ， 表 示 开 始 记 录 泻 染 中 的 操作 ， 
然后 刷新 网 页 ( 按 F5 即 可 ) ， 重 新 泻 染 网 页 。 


最 后 ， 网 页 显示 出 来 后 ， 表 按 一 下 “e” 按 氏 就 会 得 到 上 图 所 示 的 效 


果 ， 它 表示 停止 收录 这 些 数 据 。 


v 


图 中 已 经 标明 对 应 的 阶段 ， 第 一 阶段 得 到 的 信息 与 图 2-9 的 信息 类 
似 ， 只 是 表现 形式 不 一 样 。 图 中 的 “第 二 阶段 ?只 是 显示 了 “布局 计算 ” 
部 分 ， 内 部 数据 结构 的 创建 没有 在 图 中 显示 出 来 ， 这 没关系 ， 不 妨碍 
我 们 对 这 个 阶段 的 理解 。 图 中 的 “第 三 阶段 * 则 是 实际 的 绘图 阶段 ， 里 
面包 括 “paint” (表示 绘制 节点 ) 和 “composite Layers”( 合 成 网 页 的 层 
次 ) ， 这 里 主要 是 启动 了 硬件 泻 染 ， 第 8 章 再 做 详细 介绍 。 


通过 上 面 的 介绍 ， 相 信 读 者 基本 上 理解 了 这 一 过 程 ， 这 有 助 于 我 
们 编写 合适 和 高 效 的 代码 ， 启 示 至 少 有 以 下 两 点 。 


1. 通过 阶段 化 分 析 ， 网 页 开发 者 理解 “onload” 事 件 和 
“DOMContentLoaded” 事件 什么 时 候 被 触发 ， 从 而 可 以 在 
JavaScript 代 码 中 注册 相应 的 回调 函数 。 

2. 在 DOM 的 构建 过 程 中 需要 执行 JavaScript 人 代码， 所 以 需要 特别 注意 
这 部 分 代码 对 网 页 DOM 的 访问 问题 ， 因 为 这 个 时 候 DOM 可 能 还 
未 创建 完成 ， 因 而 JavaScript 代 码 不 能 访问 DOM 结 构 。 


第 3 章 ” WebKit 架构 和 模块 


从 本 章 开始 ， 正 式 进 入 介绍 WebKit 的 内 部 原理 部 分 。 这 一 章 从 
WebKit 内 部 的 主要 结构 和 模块 开始 ， 随 后 介绍 基于 WebKit 的 Chromium 
浏览 器 的 内 部 结构 和 模块 ， 并 介绍 多 线程 和 多 进程 模型 ， 并 将 
Chromium 的 多 进程 模型 同 WebKit2 的 多 进程 模型 进行 比较 ， 剖 析 目 前 
前 沿 的 浏览 器 架构 和 设计 理念 。 


3.1 WebKit 架 构 及 模块 


3.1.1 ”获取 WebKit 


WebKit 是 一 个 开源 项 目 ， 读 者 可 以 很 方便 地 从 www.webkit.org 官 
方 网 站 下 载 源 代码 ， 目 前 支持 svn 和 git 两 种 代码 管理 方式 ， 笔 者 偏好 使 
用 gito 


编译 WebKit 也 相对 简单 ， 运 行 脚本 “Tools/Scripts/build-webkit- 
hep” (查看 帮助 了 解 详细 情况 。 因 为 WebKit 支 持 不 同 的 浏览 器 ， 采 
用 不 同 的 移植 所 以 你 需要 选择 编译 哪个 移植 ， 例 如 编译 gtk 版 WebKit、 
Qthk WebKit # Safarihk Webkit. 


3.1.2 “WebKit 架 构 


WebKit 的 一 个 显著 特征 就 是 它 支 持 不 同 的 浏览 器 ， 因 为 不 同 浏览 
器 的 需求 不 同 ， 所 以 在 WebKit 中 ， 一 些 代 码 可 以 共享 ， 但 是 另外 一 部 


分 是 不 同 的 ， 这 些 不 同 的 部 分 称 为 WebKit 的 移植 (Ports) 。 今 后 笔者 
也 用 WebKit 的 移植 指 代 该 移植 和 依赖 的 WebKit 的 共享 部 分 。 


第 1 章 中 ， 笔 者 介绍 过 一 张 简单 的 webKit 结 构图 ， 图 中 只 有 简单 
的 2~3 个 模块 ， 那 是 故意 隐 去 了 其 中 的 细节 ， 本 节 重 点 介绍 WebKit 架 
构 的 细节 ， 如 图 3-1 所 示 。 


WebCore 
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图 3-1 WebKit 架 构 


图 中 的 WebKit 染 构 ， 虚 线 框 表示 该 部 分 模块 在 不 同 浏览 器 使 用 的 
WebKit 内 核 中 的 实现 是 不 一 样 的 ， 也 就 是 它们 不 是 普遍 共享 的 。 用 实 
线 框 标记 的 模块 表示 它们 基本 上 是 共享 的 ， 话 之 所 以 没有 说 绝 ， 是 因 
为 它们 中 的 一 些 特性 可 能 并 不 是 共享 的 ， 而 且 可 以 通过 不 同 的 编译 配 
置 改 变 它 们 的 行为 。 这 里 面 有 这 么 多 的 不 同 ， 所 以 ， 很 多 使 用 WebKit 
的 浏览 器 可 能 会 表现 出 不 同 的 行为 ， 显 然 就 不 令 人 惊奇 了 。 是 的 ， 确 
实 够 复杂 的 ! 


好 ， 下 面 我 们 开始 依次 从 下 向 上 来 分 析 。 


图 中 最 下 面 的 是 “操作 系统 ”，WebKit 可 以 在 不 同 的 操作 系统 上 工 
fF 〈 有 具体 选择 视 不 同 的 需要 而 定 ) 。 不 同 浏览 器 可 能 会 依赖 不 同 的 操 
作 系 统 ， 同 一 个 浏览 器 使 用 的 WebKit 也 可 能 依赖 不 同 的 操作 系统 ， 例 
40, Chromium 浏览 器 支持 Windows、Mac OS, Linux, Android 等 系 


统 。 


在 “操作 系统 ” 层 之 上 的 就 是 WebKit 赖 以 工作 的 众多 第 三 方 库 ， 这 
些 库 是 WebKit 运 行 的 基础 。 通 常 来 讲 ， 它 们 包括 图 形 库 、 网 络 库 、 视 
频 库 等 ， 加 载 和 泻 染 网 页 需要 它们 不 足 为 奇 。WebKit 是 这 些 库 的 使 用 
者 ， 如 何 高 效 地 使 用 它们 是 WebKit 和 各 种 浏览 器 厂商 的 一 个 重大 课 
题 ， 主 要 是 如 何 设 计 良 好 的 架构 来 利用 它们 以 获得 高 性 能 。 现 代 浏 览 
器 的 功能 越 来 越 强 ， 性 能 要 求 也 越 来 越 高 ， 新 的 技术 不 断 被 引入 浏览 
器 和 和 Web 平台 ， 这 也 大 大 增加 了 WebKit 和 浏览 器 的 复杂 性 。 


在 它们 二 者 之 上 的 就 是 WebKit 项 目 了 ， 图 中 已 经 把 它 细 分 为 两 
层 ， 每 层 包 含 很 多 模块 ， 由 于 图 的 大 小 限制 ， 略 去 了 其 中 一 些 次 要 模 
图 中 的 这 些 模块 支撑 了 第 2 章 介绍 的 网 页 加 载 和 泻 染 过 程 。 


WebCore 部 分 包含 了 目前 被 各 个 浏览 器 所 使 用 的 WebKit 共 享 音 
分 ， 这 些 都 是 加 载 和 泻 染 网 页 的 基础 部 分 ， 它 们 必 不 可 少 ， 具 体 包 括 
HTML (解释 器 ) 、CSS (解释 器 ) 、SVG、DOM、 泻 染 树 
(RenderObject 树 、 RenderLayer 树 等 ) ， 以 及 Inspector ( Web 
Inspector、 调 试 网 页 ) 。 当 然 ， 这 些 共享 部 分 有 些 是 基础 框架 ， 其 背 
后 的 支持 也 需要 各 个 平台 的 不 同 实 现 。 举 个 例子 来 讲 , “剪贴 板 ? 这 个 
功能 其 实 跟 平 台 密 切 相 关 ， 在 WebKit 的 gtk 版 本 中 ， 它 就 依赖 于 gtk 的 
一 个 具体 实现 。 细 心 的 读者 可 以 发 现 ，WebCore 这 些 部 分 主要 被 第 2 章 
中 的 加 载 和 泻 染 过 程 的 第 一 、 二 阶段 所 使 用 。 


v 


JavaScriptCore 引 | 擎 是 WebKit 中 的 默认 JavaScript 引 擎 ， 也 就 是 说 一 
些 WebKit 的 移植 使 用 该 引擎 。 刚 开始 ， 它 的 性 能 不 是 很 好 ， 但 是 随 着 
越 来 越 多 的 优化 被 加 入 ， 现 在 的 性 能 已 变 得 非常 不 错 。 之 所 以 说 它 只 
是 默认 的 ， 是 因为 它 不 是 唯一 并 且 是 可 替换 的 。 事 实 上 ，WebKit 中 对 
JavaScript 引 擎 的 调用 是 独立 于 引擎 的 。 在 Google 的 Chromium 开 源 项 目 
中 ， 它 被 替换 为 V8 引擎 。 


WebKit Ports 指 的 是 webKit 中 的 非 共 享 部 分 ， 对 于 不 同 浏览 器 使 用 
的 WebKit 来 说 ， 移 植 中 的 这 些 模块 由 于 平台 差异 、 依 赖 的 第 三 方 库 和 
需求 不 同等 方面 原因 ， 往 往 按照 自己 的 方式 来 设计 和 实现 ， 这 就 产生 
了 移植 部 分 ， 这 是 导致 众多 WebKit 版 本 的 行为 并 非 一 致 的 重要 原因 。 
这 其 中 包括 硬件 加 速 架构 、 网 络 栈 、 视 频 解码 、 图 片 解码 等 。 后 面 我 
们 用 移植 表示 一 个 不 同 的 实现 ， 例 如 Qt 移植 表示 的 是 webKit 的 Qt 版 ， 
被 Qt 项 目 所 使 用 。 这 一 部 分 非常 重要 ， 对 性 能 和 功能 影响 非常 大 ， 也 
是 后 面 章 节 重 点 关注 的 地 方 。 


在 WebCore 和 WebKit Ports 之 上 的 层 主要 是 提供 馈 入 式 编程 接口 ， 
这 些 同 入 式 接 口 是 提 供给 浏览 器 调用 的 (当然 也 可 以 有 其 他 使 用 
者 ) 。 图 中 有 左右 两 个 部 分 分 别 是 狭义 WebKit 的 接口 和 和 WebKit2 的 接 
口 。 因 为 接口 与 具体 的 移植 有 关 ， 所 以 有 一 个 与 浏览 器 相关 的 绑 定 
层 。 绑 定 层 上 面 就 是 WebKit 项 目 对 外 暴露 的 接口 层 。 实 际 上 接口 层 的 
定义 也 是 与 移植 密切 相关 的 ， 而 不 是 WebKit 有 什么 统一 接口 。 


WebKit 还 有 一 个 部 分 在 图 中 没有 展现 出 来 ， 那 就 是 测试 用 例 ， 包 
括 布 局 测试 用 例 (Layout Tests) 和 性 能 测试 用 例 (Performance 
Tests) ， 这 两 类 测试 包含 了 大 量 的 测试 用 例 和 期 望 结果 。 虽 然 ， 不 同 
的 WebKit 移 植 对 应 的 测试 用 例 不 一 样 ， 总 体 上 来 讲 WebKit 移 植 还 是 共 
享 了 大 量 的 用 例 。 为 了 保证 webKit 的 代码 质量 ， 这 些 用 例 被 用 来 验证 


泻 染 结果 的 正确 性 。 每 个 浏览 器 所 用 的 webKit 必 须 保证 能 够 编译 出 来 
一 个 可 执行 程序 ， 称 为 DumpRenderTree， 它 被 用 来 运行 测试 用 例 并 将 
泻 染 结 果 同 期 望 结果 对 比 。 


WebKit 的 模块 确实 相当 多 ， 笔 者 希望 没有 把 大 家 弄 糊涂 ， 下 面 让 
我 们 一 起 通过 实践 来 理解 结构 图 中 的 众多 模块 。 


3.1.3 “WebKit 源 代码 结构 


如 果 读 者 下 载 了 WebKit 源 代码 ， 下 面 就 可 以 跟着 笔者 一 起 查看 
WebKit 中 的 目录 结构 ， 以 便 更 好 地 理解 WebKit 的 架构 。 


WebKit 的 代码 非 党 多， 大 概 超过 500 万 行 代 码 ， 规 模 相 当 的 庞 
大 ， 竹 运 的 是 ， 它 的 目录 结构 非 党 清晰， 通过 目录 结构 基本 上 可 以 了 
解 WebKit 的 功能 模块 ， 当 然 ， 了 解 目录 结构 也 有 助 于 读者 理解 后 面 很 
多 对 模块 和 机 制 的 介绍 。 


图 3-2 显 示 的 是 主要 的 目录 结构 ， 包 括 一 级 目录 和 主要 的 二 级 目 
录 ， 其 中 省 去 了 一 些 次 要 目录 。 对 于 重要 的 三 级 目录 ， 读者 可 以 查看 
图 3-3。 


WebKit/ 


LayoutTests 各 种 各 样 的 测试 用 例 和 演 染 期 望 结 果 ， 包 括 文 本 和 图 睫 
PerformanceTests 各 式 各 样 的 性 能 测试 基准 用 例 ， 包 括 著 名 的 Sunspider 
Source 所 有 的 源 代 码 都 在 其 中 ， 重 点 关注 的 代码 目录 
JavaScriptCore 缺 省 的 JavaScript 引擎 
Platform Chromium 平台 相关 的 代码 ， 现 在 Chromium 部 分 已 经 被 移 除 
WebCore WebCore 包括 的 模块 
WebKit WebKit 绑 定 和 接口 
WebKit2 WebKit2 绑 定 和 接口 
WTF 基础 类 库 ， 例 如 字符 串 、 容 器 等 
Tools 
DumpRenderTree 代码 和 编译 文件 用 于 生成 DumpRenderTree 
gdb 帮助 gdb 调试 的 Python 脚本 
Scripts 各 种 各 样 的 脚本 ， 用 来 编译 、 语 法 检查 、 代 码 提交 等 
TestWebKitAPI 测试 WebKit KAZE APT 的 测试 代码 


图 3-2 ”WebKit 的 源 代 码 目录 


WebKit/Source 

WebCore 
css CSS 解释 器 
dom DOM 节点 的 基础 类 及 树 结构 
html HTML 解释 器 和 DOM 节点 类 
inspector Web Inspector 的 实现 


loader 资源 加 载 器 、 组 存 等 


与 页 面相 关 的 全 局 对 象 的 实现 ， 包 括 windows navigator 等 DOM 对 象 ， 
page 


事件 ， 动 画 处 理 
platform 各 个 移植 的 代码 
Storage 存储 的 共享 代码 
WebKit2 
efl efl 的 主 函 数 ， 构 建 一 个 简单 的 浏览 器 ， 还 有 很 多 其 他 移植 的 代码 
NetworkProcess 网 络 进程 相关 代码 
UIProcess UI 进程 相关 代码 
WebProcess Web 进程 相关 代码 


图 3-3 ”WebCore 和 WebKit2 代 码 结构 


在 一 级 目录 中 ， 重 要 的 目录 有 四 个 ， 它 们 分 别 是 LayoutTests、 
PerformanceTests、Source 和 Tools。 对 于 该 层 下 的 其 他 目录 ， 读 者 可 以 
选择 性 忽略 。 对 于 我 们 来 说 ，Source 目 录 最 重要 ， 它 包括 了 后 面 章节 
我 们 要 分 析 的 几乎 所 有 部 分 。Source 目 录 的 子 目录 中 ， 重 要 的 目录 包 
插 JavaScriptCore、Platform、WebCore、WebKit、WebKit2 和 WTF， 见 
图 3-2。JavaScriptCore 是 默认 的 泻 染 引擎 ， 笔 者 会 在 第 9 章 做 详细 分 
析 。Platform 本 来 是 Chromium 的 接口 代码 目录 之 一 ， 现 在 已 经 被 移 除 
了 。 WebCore 就 是 图 3-1 中 模块 WebCore 对 应 的 相关 代码 ， 非 常 重要 。 
WebKit 和 WebKit2 分 别 是 绑 定 和 散 入 式 接口 层 。WTF 是 一 个 基础 类 


库 ， 有 点 像 C++stl 库 ， 其 中 包括 字符 串 操 作 、 各 种 容器 、 智 能 指针 、 
线程 、 算 法 等 。 


接 下 来 的 重点 是 一 些 三 级 目录 ， 它 们 属于 二 级 目录 WebCore 和 
WebKit2。 读 者 会 发 现 图 3-1 中 WebCore 包 括 的 模块 尽 在 其 中 ， 而 且 按 
目录 组 织 ， 例 如 CSS 解 释 器 、DOM、HTML 解 释 器 、 资 源 加 载 、Web 
Inspector 等 ， 如 图 3-3 所 示 。 


WebKit2 主 要 包括 两 种 类 型 的 目录 ， 第 一 类 是 各 个 进程 的 代码 ， 
例如 Web 进 程 、UI 进 程 、 网 络 进程 、 插 件 进 程 和 它们 共享 的 代码 等 ; 
第 二 类 就 是 各 个 移植 的 一 个 简单 的 主 函 数 (main) 入 口 ， 拥 有 构建 一 
个 基于 WebKit2 接 口 的 最 简单 的 可 执行 程序 。 

同 在 目录 “WebKit/Source” 下 的 “WebKit”* 目 录 这 里 就 不 介绍 了 ， 它 
| 同 “WebKit2” 目 录 结 构 类 似 ， 而 且 比 之 更 简单 。 


3.2 ”基于 Blink 的 Chromium 浏 览 
器 结构 


3.2.1 ”Chromium 浏览 器 的 架构 及 模 
块 


Chromium 也 是 基于 WebKit (Blink) 的 ， 而 且 在 WebKit 的 移植 部 
分 中 ，Chromium 也 做 了 很 多 有 趣 的 事情 ， 所 以 通过 Chromium 可 以 了 
解 如 何 基于 WebKit 构 建 浏览 器 。 另 一 方面 ，Chromium 也 是 很 多 新 技术 
的 创新 者 ， 它 将 很 多 先进 的 理念 引入 到 浏览 器 领域 。 为 此 ， 本 节 在 介 


GA &R 构 、 模 块 等 基础 上 ， 给 读者 一 个 大 致 的 概念 ， 在 后 
面 介 绍 WebKit 的 一 些 技 术 时 ， 也 会 介绍 Chromium 的 WebKit 版 本 和 
Chromium 有 何 独特 之 处 。 


Chromium 的 代码 非 党 复杂， 模块 非 党 多， 结构 也 不 是 特别 清晰 ， 
非常 容易 让 人 迷惑 。 为 此 ， 为 了 方便 理解 ， 下 面 从 架构 和 模块 、 多 进 
程 模 开 和 多 线程 模型 等 角度 为 读者 一 一 剖析 其 中 的 “玄机 ”。 


3.2.1.1 ”架构 和 模块 


首先 要 熟悉 的 是 Chromium 的 以 构 及 其 包含 的 模块 。 图 3-4 摘 述 了 
Chromium 的 架构 和 主要 的 模块 。 从 图 中 可 以 看 到 ，Blink 只 是 其 中 的 
一 块 ， 和 它 并 列 的 还 有 众多 的 Chromium 模块 ， 包 括 
GPU/CommandBuffer (硬件 加 速 架构 ) 、V8 JavaScript 引擎 、 阔 箱 模 
型 、CC (Chromium Compositor) ~ IPC, UI (还 有 很 多 并 没有 在 图 
中 显示 出 来 ) o 


Blink (WebKit) 


图 3-4 Chromium 模块 结构 图 


在 上 面 这 些 模 块 之 上 的 就 是 著名 的 “Content 模 块 " 和 “Content API 
(接口 ) *”， 它 们 是 Chromium 对 泻 染 网 页 功能 的 抽象 。“Content” 的 本 
意 是 指 网 页 的 内 容 ， 这 里 是 指 用 来 泻 染 网 页 内 容 的 模块 。 说 到 这 里 ， 
读者 可 能 有 疑问 了 ，WebKit 不 就 是 泻 染 网 页 内 容 的 吗 ? 是 的 ， 说 的 没 
错 ， 没 有 Content 模 块 ， 浏 览 器 的 开发 者 也 可 以 在 WebKit 的 Chromium 
移植 上 泻 染 网 页 内 容 ， 但 是 却 没有 办 法 获得 沙 箱 模型 、 跨 进程 的 GPU 
人 硬件 加 速 机 制 、 众 多 的 HITML5 功 能 ， 因 为 这 些 功能 很 多 是 在 Content 层 
里 实现 的 。 


“Content 模 块 " 和 “Content AP 将 下 面 的 泻 染 机 制 、 安 全 机 制 和 插 
件 机 制 等 隐藏 起 来 ， 提 供 一 个 接口 层 。 该 接口 目前 被 上 层 模 块 或 者 其 
他 项 目 使 用 ， 内 部 调用 者 包括 Chromium 浏 览 器 、Content Shell, Yb 
部 包括 CEF (Chromium Embedded Framework) 、Opera 浏 览 器 等 。 


“Chromium 3x] 5 28” #0 “Content Shell” 是 构建 在 Content API 之 上 的 
两 个 “浏览 器 ?>，Chromium 具 有 浏览 器 完整 的 功能 ， 也 就 是 我 们 编译 出 
来 能 看 到 的 浏览 器 式样 。 而 “Content Shell” 是 使 用 Content API 来 包装 的 
一 层 简 单 的 “ 壳 ”， 但 是 它 也 是 一 个 简单 的 “浏览 器 *， 用 户 可 以 使 用 
Content 模 块 来 泻 染 和 显示 网 页 内 容 。Content Shell 的 作用 很 明显 ， 其 
一 可 以 用 来 测试 Content 模 块 很 多 功能 的 正确 性 人 ， 例 如 泻 染 、 硬 件 
DRS; 其 二 是 一 个 参考 ， 可 以 被 很 多 外 部 的 项 目 参 考 来 开发 基于 
“Content API” 的 浏览 器 或 者 各 种 类 型 的 项 目 。 


在 Android 系 统 上 ，Content Shell 的 作用 更 大 ， 这 是 因为 同 它 并 排 
的 左 侧 的 “Chromium 浏 览 器 * 部 分 的 代码 根本 就 没有 开源 ， 这 直接 导致 
开发 者 只 能 依赖 Content Shell。 


还 有 一 个 上 面 故 意 漏 掉 的 部 分 就 是 “Android WebView”, CHA S 
满足 Android 系 统 上 的 WebView 而 设计 的 ， 其 思想 是 利用 Chromium 的 
实现 来 替换 原来 Android 系 统 默认 的 webView， 这 部 分 在 第 15 章 中 会 作 


介绍 。 


3.2.1.2 ”多 进程 模型 


前 面 多 次 提 到 过 Chromium 的 多 进程 架构 ， 下 面谈 谈 它 的 好 处 。 相 
信 你 一 定 有 过 这 样 的 经 历 : 在 使 用 浏览 器 打开 很 多 个 页 面 的 时 候 ， 不 
广 的 是 其 中 某 个 页 面 不 响应 或 者 朋 溃 了 ， 随 之 而 来 的 可 能 是 更 不 乎 的 
事 一 一 其 他 所 有 页 面 也 都 不 响应 或 者 朋 演 了 。 最 让 人 不 能 忍受 的 是 ， 
其 中 一 些 页 面 可 能 还 有 未 保存 或 者 未 发 送 的 信息 ! 


这 绝对 是 不 堪 回 首 的 过 去 。 但 是 ， 现 在 好 了 ， 很 多 现代 浏览 器 支 
持 多 进程 模型 ， 这 个 模型 可 以 很 好 地 避免 上 面 的 问题 ， 虽 然 它 很 复杂 
而 且 也 有 自身 的 问题 ， 例 如 更 多 的 资源 消耗 ， 但 是 它 的 优势 也 是 非常 
明显 的 。 在 WebKit 内 核 之 上 ，Chromium 率 先 在 WebKit 之 外 引入 了 多 进 
程 模型 。 


多 进程 模型 在 不 可 避免 地 珊 来 一 些 问题 和 复杂 性 的 同时 ， 也 市 来 
了 更 多 的 优势 ， 而 且 这 些 优势 非常 的 重要 。 该 模型 至 少 带 来 三 点 好 
处 : 其 一 是 避免 因 单个 页 面 的 不 响应 或 者 朋 溃 而 影响 整个 浏览 器 的 稳 
定性 ， 特 别 是 对 用 户 界 面 的 影响 ， 其 二 是 ， 当 第 三 方 插件 衣 溃 时 不 会 
影响 页 面 或 者 浏览 器 的 稳定 性 ， 这 时 因为 第 三 方 插件 也 被 使 用 单独 的 
进程 来 运行 ， 其 三 是 ， 它 方便 了 安全 模型 的 实施 ， 也 就 是 说 阔 箱 模型 
是 基于 多 进程 架构 的 。 其 实 ， 这 很 大 程度 上 也 是 webKit2 产 生 的 原 
因 。 那 么 ， 这 是 怎么 做 到 的 呢 ? 


看 错 * 


图 3-5 给 出 了 最 常用 的 Chromium 浏 览 器 多 进程 模型 ， 是 的 ， 你 没 
常用 ”二 字 ， 因 为 Chromium 架 构 设计 的 灵活 性 ， 使 用 者 可 以 通过 


简单 的 设置 来 随意 改变 它 的 进程 模型 方式 。 图 中 方 框 代 表 进 程 ， 连 接 
线 代 表 IPC 进 程 间 通信 。 这 些 连 接线 其 实 是 很 讲究 的 ， 它 表示 进程 存 
在 进程 间 通 信 ， 如 果 没 有 ， 表 明 两 种 不 同类 型 的 进程 之 间 没 有 通信 。 
例如 NPAPI 插 件 和 GPU 之 间 没 有 通信 ， 这 是 因为 NPAPI 是 一 种 古老 的 
插件 标准 ， 它 没有 定义 使 用 GPU 进行 加 速 的 接口 。 


型 。 


从 图 3-5 中 ， 读 者 可 以 看 到 Chromium 浏 览 器 主要 包括 以 下 进程 类 


Browser 进 程 : 浏览 器 的 主 进程 ， 负 责 浏览 器 界面 的 显示 、 各 个 
页 面 的 管理 ， 是 所 有 其 他 类 型 进程 的 祖先 ， 负 责 它 们 的 创建 和 销 
毁 等 工作 ， 它 有 且 仪 有 一 个 。 图 3-5 Chromium 的 多 进程 模型 
Renderer 进 程 : 网 页 的 泻 染 进程 ， 负 责 页 面 的 泻 染 工作 ， 
Blink/WebKit 的 泻 染 工作 主要 在 这 个 进程 中 完成 ， 可 能 有 多 个 ， 
但 是 Renderer 进 程 的 数量 是 否 同 用 户 打开 的 网 页 数量 一 致 呢 ? 答 
案 是 不 一 定 。Chromium 设 计 了 灵活 的 机 制 ， 允 许 用 户 配置 ， 随 后 
就 作 介 绍 。 此 外 ， 在 沙 箱 模型 启动 的 情况 下 ， 该 进程 可 能 会 发 生 
一 些 改变 。 

NPAP1 插 件 进程 : 该 进程 是 为 NPAPI 类 型 的 插件 而 创建 的 。 其 创 
建 的 基本 原则 是 每 种 类 型 的 插件 只 会 被 创建 一 次 ， 而 且 仅 当 使 用 
时 才 被 创建 。 当 有 多 个 网 页 需要 使 用 同一 种 类 型 的 插件 的 时 候 ， 
例如 很 多 网 页 需要 使 用 Flash 插 件 ，Flash 插 件 的 进程 会 为 每 个 使 用 
者 创建 一 个 实例 ， 所 以 插件 进程 是 被 共享 的 。 

GPU 进程 : 最 多 只 有 一 个 ， 当 且 仅 当 GPU 硬件 加 速 打开 的 时 候 才 
会 被 创建 ， 主 要 用 于 对 3D 图 形 加 速 调 用 的 实现 。 


。 Pepper 插件 进程 : 同 NPAPI 插 件 进 程 ， 不 同 的 是 为 Pepper 插件 而 
创建 的 进程 。 

。 其 他 类 型 的 进程 : 图 中 还 有 一 些 其 他 类 型 的 进程 没有 描述 出 来 ， 
例如 Linux 下 的 “Zygote” 进 程 ，Renderer 进 程 其 实 都 是 由 它 创 建 而 
来 。 另 外 一 个 就 是 名 为 “Sandbox” 的 准备 进程 ， 这 在 安全 机 制 中 作 
进一步 的 介绍 。 


通过 上 面 的 讨论 ， 对 于 桌面 系统 (Windows, Linux, MacOS) 中 
的 Chromium 浏 览 器 ， 它 们 的 进程 模型 总 结 后 包括 以 下 一 些 特征 。 


ee eee ee 
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每 个 网 页 是 独立 的 进程， 这 保证 了 页 面 之 间 相 互 不 及 用 

插件 进程 也 是 独立 的 ， 插 件 本 身 的 问题 不 会 影响 浏览 器 主 界面 和 
网 页 。 

GPU 硬 件 加 速 进程 也 是 独立 的 。 


i 


Goya 


> 


经 过 这 些 分 析 ， 读 者 应 该 理解 这 一 模型 为 什么 能 够 解决 本 节 开 始 
时 候 遇 到 的 问题 一 一 多 使 用 了 些 资源 ， 换 来 的 好 处 是 浏览 器 更 稳定 
了 。 


上 面 的 模型 是 针对 桌面 版 的 Chromium ， 而 对 于 Chromium 的 
Android 版 ， 主 体 进 程 模型 大 致 相同 ， 但 还 是 稍微 有 些 不 同 ， 主 要 指 的 
是 GPU 进程 和 Renderer 进 程 (目前 ，Android 版 不 支持 插件 ， 所 以 也 就 
没有 插件 进程 ) 。 在 Android 平 台 上 ，GPU 进 程 演变 成 Browser 进 程 的 
ics 也 就 是 GPU 线程 ， 这 得 益 于 其 灵活 的 架构 ， 主 要 目的 之 一 

节省 资源 。 另 外 一 个 就 是 Renderer 进 程 ，Renderer 也 是 独立 的 进程 ， 
但 是 会 演变 成 Android 上 的 服务 (service) 进程 。 而 且 ， 由 于 Android 系 


统 的 局 限 性 ，Renderer 进 程 的 数目 会 被 严格 限制 ， 这 就 涉及 到 了 “ 影 


= 


(Phantom) 标签 的 议题 。“ 影 子 ” 标 签 就 是 浏览 器 会 将 后 台 的 网 页 


所 使 用 的 泻 染 设 施 都 清除 了 ， 只 是 原来 的 一 个 影子 ， 当 用 户 再 次 切换 
的 时 候 ， 网 页 需要 重新 加 载 和 泻 染 。 


上 面 说 到 Chromium 人 允许 用 户 配 置 Renderer 进 程 被 创建 的 方式 ， 下 


面 简单 地 介绍 一 下 模型 的 类 型 。 


Process-per-site-instance: 该 类 型 的 含义 是 为 每 一 个 页 面 都 创建 
一 个 独立 的 Render 进 程 ， 不 管 这 些 页 面 是 否 来 自 于 同一 域 。 举 个 
例子 来 讲 ， 例 如 ， 用 户 访问 了 milado_nju 的 CSDN 博 客 (我 的 博 
客 ) ， 然 后 从 个 人 主页 打开 多 篇 文章 时 ， 每 篇 文章 的 页 面 都 是 该 
域 的 一 个 实例 ， 因 而 它们 都 有 各 自 不 同 的 泻 染 进程 。 如 果 新 打开 
CSDN 博 客 的 主页 ， 那 么 就 是 另 一 个 实例 ， 会 重新 创建 进程 来 泻 
染 它 。 这 带 来 的 好 处 是 每 个 页 面 互 不 影响 ， 坏 处 自然 是 资源 的 已 
大 浪费 。 

Process-per-site: 该 类 型 的 含义 是 属于 同一 个 域 的 页 面 共 享 同一 
个 进程 ， 而 不 同属 一 个 域 的 页 面 则 分 属 不 同 的 进程 。 好 处 是 对 于 
相同 的 域 ， 进 程 可 以 共享 ， 内 存 消 耗 相 对 较 小 ， 坏 处 是 可 能 会 
特别 大 的 Renderer 进 程 。 读 者 可 以 在 命令 行 加 入 参数 --process-per- 
site 进 行 尝 试 。 

Process-per-tab: 该 类 型 的 含义 是 ，Chromium 为 每 个 标签 页 都 创 
建 一 个 独立 的 进程 ， 而 不 管 它们 是 否 是 不 同 域 不 同 实例 ， 这 也 是 
Chromium 的 默认 行为 ， 虽 然 会 瀛 费 资源 。 

Single process: 该 类 型 的 含义 是 ，Chromium 不 为 页 面 创建 任何 
独立 的 进程 ， 所 有 泻 染 工作 都 在 Browser 进 程 中 进行 ， 它 们 是 
Browser 进 程 中 的 多 个 线程 。 但 是 这 个 类 型 在 桌面 系统 上 只 是 实验 


性 质 并 且 不 是 很 稳定 ， 因 而 一 般 不 推荐 使 用 ， 只 有 在 比较 单 进程 
和 多 进程 时 相对 有 用 ， 读 者 可 以 在 命令 行 加 入 参数 --single-process 
来 尝试 它 。 当 然 在 Chromium 的 Android 版 本 上 ， 情 况 再 一 次 不 一 
样 。 在 Android WebView 中 ， 该 模式 被 采用 。 


3.2.1.3 ”Browser 进 程 和 Renderer 进 程 


为 Browser 进 程 和 Renderer 进 程 都 是 在 WebKit 的 接口 之 外 由 
Chromium 引 入 的 ， 所 以 这 里 有 必要 介绍 一 下 它们 是 如 何 利 用 WebKit 泻 
染 网 页 的 ， 这 其 中 的 代码 层次 由 图 3-6 给 出 。 


浏览 器 的 用 户 界面 


(Src/chrome) 


Web Contents 页 面 内 容 
(src/content/browser/web_contents) 


Browser 
进程 


RendererHost 
(src/content/renderer_host) 


Renderer 
(src/content/renderer) 


Renderer 
进程 


WebKit 黏附 层 
(sre/webkit/ glue) 


WebKit 接口 层 
( WebKit/Source/WebK it ) 


图 3-6 ”从 WebKit 接 口 层 到 用 户 界面 的 路 径 


最 下 面 的 就 是 webKit 接 口 层 ， 一 般 基 于 WebKit 接 口 层 的 浏览 器 直 
接 在 上 面 构建 ， 而 没有 引入 复杂 的 多 进程 架构 。 


然后 ， 在 WebKit 接 口 层 上 面 就 是 Chromium 基 于 WebKit 的 接口 层 而 
引入 的 黏附 层 ， 它 的 出 现 主要 是 因为 Chromium 中 的 一 些 类 型 和 WebKit 
内 部 不 一 致 ， 所 以 需要 一 个 简单 的 桥接 层 。 


再 上 面 的 就 是 Renderer ， 它 主要 处 理 进 程 间 通 信 ， 接 受 来 自 
Browser 进 程 的 请 求 ， 并 调用 相应 的 WebKit 接 口 层 。 同 时 ， 将 WebKit 
的 处 理 结果 发 送 回 去 。 上 面 这 些 介绍 的 层 都 是 在 Renderer 进 程 中 工作 
的 。 


下 面 就 进入 了 Browser 进程， 与 Renderer 相 对 应 的 就 是 
RendererHost ， 其 目的 也 是 处 理 同 Renderer 进 程 之 间 的 通信 。 不 过 
RendererHost 是 给 Renderer 进 程 发 送 请 求 并 接收 来 自 Renderer 进 程 的 结 
果 。 


Web Contents 表 示 的 就 是 网 页 的 内 容 ， 因 为 网 页 可 能 有 多 个 需 
绘制 的 内 容 ， 例 如 弹出 的 对 话 框 内 容 ， 所 以 这 里 是 “Contents”*。 它 同时 
包括 显示 网 页 内 容 的 一 个 子 窗口 (在 桌面 系统 上 ) ， 这 个 子 窗口 最 后 
被 艇 入 浏览 器 的 用 户 界 面 ， 作 为 它 的 一 个 标签 页 。 通 过 上 面 的 介绍 ， 
相信 这 里 面 的 关系 已 经 被 理 顺 了 。 那 么 ， 进 程 的 内 部 又 是 什么 情况 
呢 ? 如 何在 支持 进程 间 通 信 的 同时 又 能 支持 高 效 泻 染 或 者 用 户 事件 响 
应 ? 答案 是 多 线程 模型 。 


3.2.1.4 ”多 线程 模型 
每 个 进程 内 部 ， 都 有 很 多 的 线程 ， 那 么 chromium 为 什么 要 这 样 做 


呢 ? 对 于 Browser 进 程 ，Chromium 的 官方 说 法 告诉 我 们 ， 多 线程 的 主 
要 目的 就 是 为 了 保持 用 户 界 面 的 高 响应 度 ， 保 证 UI 线 程 (Browser 进 程 


中 的 主线 程 ) 不 会 被 任何 其 他 费时 的 操作 阻碍 从 而 影响 了 对 用 户 操作 
的 响应 。 这 些 费 时 的 其 他 操作 很 多 ， 例 如 本 地 文件 读 写 、socket 读 
写 、 数 据 库 操作 等 。 既 然 文 件 读者 等 会 阻碍 其 他 操作 ， 那 好 ， 把 它们 
放 在 单独 的 线程 里 自己 忙 或 者 等 待 去 吧 ， 所 以 读者 就 看 到 那么 多 与 它 
们 相关 的 线程 。 而 在 Renderer 进 程 中 ，Chromium 则 不 让 其 他 操作 阻止 
泻 染 线程 的 快速 执行 。 更 甚 者 ， 为 了 利用 多 核 的 优势 ，Chromium 将 泻 
染 过 程 管 线 化 ， 这 样 可 以 让 泻 染 的 不 同 阶段 在 不 同 的 线程 执行 。 


图 3-7 展 示 了 主要 进程 中 的 重要 线程 信息 及 它们 之 间 是 如 何 工作 
的 。 事 实 上 ， 进 程 中 的 线程 远 远 不 止 这 些 ， 这 里 只 是 列举 了 其 中 两 个 
重要 的 线程 。 


Browser 进程 


UI 线程 演 染 线程 


IO 线程 IO 线程 
=~? 


= 


3-7 Chromium 的 多 线程 模型 


那么 ， 网 页 的 加 载 和 泻 染 过 程 在 图 中 模型 下 的 基本 工作 方式 如 以 
下 步骤 。 


1. Browser 进 程 收 到 用 户 的 请 求 ， 首 先 由 UI 线程 处 理 ， 而 且 将 相应 的 
任务 转 给 IO 线 程 ， 它 随即 将 该 任务 传递 给 Renderer 进 程 。 


2. Renderer 进 程 的 IO 线程 经 过 简单 解释 后 交 给 泻 染 线程 。 泻 染 线 程 
接受 请 求 ， 加 载 网 页 并 泻 染 网 页 ， 这 其 中 可 能 需要 Browser 进 程 获 
取 资 产 和 需要 GPU 进程 来 帮助 泻 染 。 最 后 Renderer 进 程 将 结果 由 
IO 线 程 传递 给 Browser 进 程 。 

3. 最 后 ，Browser 进 程 接收 到 结果 并 将 结果 绘制 出 来 。 


接 下 来 ，Chromium 中 的 线程 间 如 何 通 信和 同步 呢 ? 这 是 多 线程 领 
域 中 一 个 非常 难 缠 的 问题 ， 因 为 这 会 造成 死 锁 或 者 资源 的 竞争 冲突 等 
问题 。Chromium 精 心 设 计 了 一 套 机 制 来 处 理 它们 ， 那 就 是 绝 大 多 数 的 
场景 使 用 事件 和 一 种 Chromium 新 创建 的 任务 传递 机 制 ， 仪 在 非 用 不 可 
的 情况 下 才 使 用 锁 或 者 线程 安全 对 象 。 3 


还 可 以 继续 深入 下 去 ， 那 就 是 线程 内 部 的 消息 和 任务 是 如 何 处 理 
的 呢 ? 这 其 实 并 不 容易 ， 因 为 它 严 重地 影响 了 用 户 界面 的 响应 度 和 
JavaScript 执 行 的 效率 ， 我 们 在 第 9 章 介 绍 JavaScript 引 擎 的 时 候 会 一 并 


介绍 。 


3.2.1.5 ”Content 接口 


Content 接 口 不 仅 提 供 了 一 层 对 多 进程 进行 泻 染 的 抽象 接口 ， 而 且 
它 从 诞生 以 来 一 个 重要 的 目标 就 是 要 支持 所 有 的 HIML5 功 能 、GPU 硬 
件 加 速 功能 和 沙 箱 机 制 ， 这 可 以 让 Content 接 口 的 使 用 者 们 不 需要 很 多 
的 工作 即 可 得 到 很 强大 的 能 力 。 下 面 详细 介绍 一 下 Content 接 口 包 含 哪 
些 部 分 。 


Content 接 口 的 相关 定义 文件 均 在 “content/public* 目 录 下 ， 按 照 功 
能 分 成 六 个 部 分 。 每 个 部 分 的 接口 一 般 也 可 以 分 成 两 类 ， 第 一 类 是 启 


入 者 (embedder, X £5) LA Chromium 浏览 器 、CEF3 和 Content 
Shell) 调用 的 接口 ， 另 一 类 是 网 入 者 应 该 实现 的 回调 接口 ， 被 Content 
接口 的 内 部 实现 所 调用 ， 用 来 参与 具体 实现 的 逻辑 或 者 事件 的 监听 


等 。 


App 

这 部 分 主要 与 应 用 程序 或 者 进程 的 创建 和 初始 化 相关 ， 它 被 所 有 
的 进程 使 用 ， 用 来 处 理 一 些 进 程 的 公共 操作 ， 具 体 包 括 两 种 类 
型 ， 第 一 类 主要 包括 进程 创建 的 初始 化 水 数 ， 也 就 是 Content 模 块 
的 初始 化 和 关闭 动作 ;第 二 类 主要 是 各 种 回调 遂 数 ， 用 来 告诉 主 
入 者 启动 完成 ， 进 程 启动 、 退 出 ， 阔 使 模型 初始 化 开始 和 结束 
等 。 

Browser 

同样 包括 两 类 ， 第 一 类 包括 对 一 些 HTML5 功 能 和 其 他 一 些 高 级 功 
能 实现 的 参与 ， 因 为 这 些 实现 需要 Chromium 的 不 同 平台 的 实现 ， 
同时 需要 例如 Notification、 Speech recognition、 Web worker、 
Download、 Geolocation 等 这 些 Content 层 提供 的 接口 ，Content 模 块 
需要 调用 它们 来 实现 HTML5 功 能 。 第 二 类 中 的 典型 接口 类 是 
ContentBrowserClient， 主 要 是 实现 部 分 的 逻辑 ， 被 Browser 进 程 调 
用 ， 还 有 就 是 一 些 事件 的 函数 回调 。 

Common 

主要 定义 一 些 公共 的 接口 ， 这 些 被 Renderer 和 Browser 共 享 ， 例 如 
一 些 进 程 相 关 、 参 数 、GPU 相 关 等 。 

Plugin 

仅 有 一 个 接口 类 ， 通 知 诅 入 者 Plugin 进 程 何 时 被 创建 。 

Renderer 


该 部 分 也 包括 两 类 ， 第 一 类 包含 获取 RenderThread 的 消息 循环 、 


注册 V8 Extension, 计算 JavaScript RATS; 第 二 类 包括 
ContentRendererClient， 主 要 是 实现 部 分 逻辑 ， 被 Browser 端 (或 
者 进程 ) 调用 ， 还 有 就 是 一 些 事件 的 函数 回调 。 

Utility 

工具 类 接口 ， 主 要 包括 让 家 入 者 参与 Content 接 口中 的 线程 创建 和 
消息 的 过 滤 。 


3.2.2 XE: 从 Chromium 代 人 码 结构 
和 运行 状态 理解 现代 浏览 器 


下 面 让 我 们 阅读 Chromium 的 代码 结构 以 及 详细 了 解 Chromium 运 
行 时 候 的 状态 信息 来 帮助 读者 对 上 面 介绍 的 架构 模型 有 直观 的 印象 。 


3.2.2.1 ”Chromium 代码 结构 


图 3-8 显 示 的 是 Chromium 项 目的 一 级 目录 ， 节 选 了 其 中 重要 的 模 
块 ， 略 去 了 一 些 次 要 的 部 分 。 读 者 会 发 现 ， 这 其 中 已 经 包含 了 很 多 模 
块 。 


从 图 中 的 各 个 目录 和 后 面 的 解释 ， 基 本 可 以 看 出 Chromium 在 
WebKit 之 上 引入 了 很 多 新 特性 和 功能 。 除 此 之 外 ，Chromium 项 目 除了 
包括 浏览 器 ， 还 包括 ChromiumOS 和 Chrome Frame， 这 也 是 新 颖 的 地 
方 。ChromiumOS 就 是 一 个 基于 Web 的 操作 系统 ， 仅 支持 Web 网 页 和 
Web 应 用 程序 。 而 Chrome Frame 是 一 个 有 趣 的 东西 ， 其 目的 是 提供 一 
个 基于 WebKit 和 Content 的 支持 HIML5 的 插件 ， 该 插件 可 以 运行 在 了 正 浏 


览 器 中 ， 以 弥补 老 版 本 的 下 浏览 器 对 HITML5 支 持 不 足 的 问题 ， 不 过 它 
很 快 就 会 被 抛弃 。 


中 省 略 了 一 个 其 实 非 党 重要 的 目录 ， 那 就 是 "third_party”。 该 目 
录 保 存 了 Chromium 所 依赖 的 所 有 第 三 方 开源 项 目 。 因 为 Chromium 提 
供 了 很 多 新 特性 和 功能 ， 相 应 地 ， 这 些 新 功能 也 需要 很 多 库 来 支持 ， 
而 且 这 些 特性 和 功能 会 存在 一 些 不 足 ， 或 者 Chromium 有 特定 需求 ， 所 
以 ，Chromium 的 做 法 就 是 将 超过 150 个 的 项 目 直接 包含 进来 。 其 实 ， 
Blink 的 代码 也 被 包含 在 其 中 。 


读者 可 以 将 图 中 的 代码 目录 结构 同 图 3-4 中 的 模块 对 应 ， 理 解 它们 
是 如 何 被 组 织 的 ， 当 然 实际 的 代码 远 不 止 这 些 。 在 描述 完 一 级 目录 之 
后 ， 下 面 重 点 描述 的 是 Content 上 目录， 其 目录 安排 如 图 3-9 所 示 。 结 构 很 
容易 理解 ， 它 们 基本 上 对 应 了 多 进程 模型 中 的 各 种 进程 类 型 。 


src/ 


apps Chromium 中 用 来 支持 Web 应 用 程序 的 代码 

base 各 种 各 样 的 基础 设施 类 ， 例 如 消息 循环 、 线 程 、 日 志 、 文 件 等 
build 编 诺 使 用 的 各 种 脚本 ，Chromium 使 用 GYP 来 生成 Make 文件 
cc Chromium Compositor. ARARE KJER KA A 

chrome 在 Content 之 上 构建 浏览 器 需要 的 各 个 模块 ， 例 如 用 户 界面 等 


chrome frame IE 浏览 器 中 的 插件 ，IE 使 用 它 来 支持 HTML5 


chrome os Chrome OS 的 相关 代码 
components Chrome 项 目 逐 步 将 “chrome” 目 录 中 的 功能 模块 化 ， 这 些 模块 可 以 被 “content” 层 所 使 
content Content 模块 的 实现 和 接口 
— extensions Chromium 的 扩展 机 制 ， 逐 渐 从 chrome 移出 来 
google* Google 相关 服务 
—— gpu GPU 人 馈 件 加 速 机 制 包括 GPU 进程 和 command buffer 等 
= 顾名思义 ， 进 程 间 通 信 机 制 
media 多 媒体 支持 的 框架 和 优化 
native_client Chromium 的 native client 机 人 制 
iei 网 络 栈 和 新 的 网 络 机 制 ， 如 SPDY. QUIC 
ppapi PPAPI 模块 
remoting Chromoting， 也 就 是 远程 桌面 ， 为 ChromeOS 服务 
sandbox 沙 箱 模型 
skia 2D 绘图 库 
ui Chromium 的 UI 基础 框架 ， 包 括 与 平台 无 关 的 “views ”框架 
v8 V8 JavaScript 引擎 
webkit Chromium 使 用 WebKit 的 黏附 层 代码 


图 3-8 “Chromium 的 源 代 码 结构 


sre/content 


app 各 个 进程 的 公共 实现 部 分 
browser Browser 进程 所 需 的 代码 
common 被 进程 共享 的 代码 


GPU 进程 的 代码 


gpu 

plugin 插件 进程 的 代码 

public 提供 Content 接口 的 目录 
ae 目录 结构 跟 Content 下 面 的 结构 非常 

类 似 ， 因 为 它 表 示 的 是 各 个 进程 的 接口 

brows 
common 
renderer 

renderer renderer 进程 的 相关 代码 

shell Content Shell 的 代码 


图 3-9 “content” 目 录 结 构 


Content 的 接口 主要 在 “public* 目 录 中 ， 它 包含 的 目录 也 是 按照 进 
时 类 型 来 划分 的 。 读 者 回顾 一 下 之 前 关于 这 部 分 接口 的 介绍 就 能 明白 
它们 的 对 应 关系 。 


3.2.2.2 Chromium 多 进程 


笔者 希望 通过 运行 中 的 Chrome 浏 览 器 来 帮助 读者 理解 多 进程 模 
型 ， 主要 步骤 如 下 。 


1. 打开 Chrome 浏 览 器 ， 然 后 打开 两 个 标签 页 ， 分 别 输入 以 下 两 个 网 
HE : http://blog.csdn.net/milado_nju 和 http://www.webkit.org/blog- 
files/3d-transforms/morphing-cubes.htmlo 

2. 打开 任务 管理 器 ， 将 进程 按照 “命令 行 ? 排 序 ， 找 到 “Google 
Chrome” 相 应 的 信息 。 

3. 读者 会 发 现 总 共有 5 个 “Google Chrome” 进 程 ， 如 图 3-10 所 示 。 


© Google Chrome (32 bit) “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" 


© Google Chrome (32 bit! “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --type=gpu-process --channel= 
6 


© Google Chrome (32 bit 


( ) 

© Google Chrome (32 bit) “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --type=ppapi --channel="3116." 
( ) “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --type=renderer --lang=zh-CN - 
( ) 


) 
) 
) 
) 


© Google Chrome (32 bit “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --type=renderer --lang=zh-CN - 


图 3-10 Google Chrome 浏 览 器 在 windows 上 的 多 进程 示例 


在 5 个 进程 中 ， 其 中 第 一 个 没有 参数 ， 它 就 是 主 进程 “Browser”。 
后 面 四 个 进程 都 有 参数 ， 其 中 第 一 个 参数 表示 的 是 进程 类 型 ， 图 中 分 
别 是 GPU 进程 、PPAPI 进 程 和 两 个 Renderer 进 程 。 读 者 会 发 现 这 些 进 程 
共享 同一 个 二 进 制 可 执行 文件 。 有 兴趣 的 读者 可 以 再 研究 一 下 后 面 的 
参数 ， 它 们 用 来 表示 IPC 等 信息 。 


上 面 的 例子 中 ， 之 所 以 打开 第 一 个 网 址 ， 是 因为 它 会 触发 创建 
PPAPI 进 程 ; 之 所 以 打开 第 二 个 网 址 ， 是 因为 需要 硬件 加 速 机 制 ， 它 
会 触发 创建 GPU 进程 。 外 


3.2.2.3 ”Chromium 多 线程 


下 面 以 Linux 平 台 的 Chromium 浏 览 器 为 例 ， 介 绍 Browser 进 程 和 
Renderer 进 程 中 包含 的 线程 的 情况 。 首 先 来 看 Browser 进 程 ， 访 进程 包 
含 了 非常 多 的 线程 ， 多 达 28 个 ， 图 3-11 显 示 的 是 Linux 平 台 下 Chromium 


浏览 器 的 Browser 进 程 的 线程 信息 。 查 看 方法 很 简单 ， 就 是 使 用 GDB 调 
试 该 进程 ， 然 后 输入 “info threads” 查 看 结果 


28 Thread @x7f1b45c5c700 (LWP 1905) "dconf worker" @0x00007f1b4e22e303 in poll ( 
27 Thread 0x7f1b4545b700 (LWP 1906) "gdbus" 0x0@007f1b4e22e303 in poll () from 
26 Thread @x7f1b439a4700 (LWP 1907) “NetworkChangeNo" @x@0007f1b4e235ed9 in sys 
25 Thread @x7#1b431a3700 (LWP 1908) “inotify_reader"” 9x@0007f1b4e233023 in sele 
24 Thread @x7f1b429a2700 (LWP 1909) “WorkerPool/1989" @0x00007f1b4f38b0fe in pth 
23 Thread @x71b42960700 (LWP 1911) “AudioThread” @x@@007f1b4f38ad84 in pthread 
22 Thread @x7f1b40d22700 (LWP 1912) “threaded-ml" 9x00007f1b4e22e303 in poll () 
21 Thread @x7f1b46f33700 (LWP 1913) "CrShutdownDetec" @x@0007f1b4f38dd2d in rea 
20 Thread @x7f1b3ba96700 (LWP 1914) “Chrome_DBThread" @x®@@007f1b4f38ad84 in pth 
19 Thread @x7f1b3b295700 (LWP 1915) "Chrome_WebKitTh" @x@0007f1b4f38ad84 in pth 
18 Thread @x7f1b3aa947@0 (LWP 1916) “Chrome_FileThre"” 0x@0007f1b4e235ed9 in sys 
17 Thread @x7f1b3a293700 (LWP 1917) “Chrome_FileUser"” 0x00007f1b4f38ad84 in pth 
16 Thread @x7f1b39a92700 (LWP 1918) “Chrome_ProcessL" @x@0007f1b4f38ad84 in pth 
15 Thread @x7f1b39291700 (LWP 1919) "Chrome_CacheThr” @x@0007f1b4e235ed9 in sys 
14 Thread @x7f1b38a907900 (LWP 1920) “Chrome_IOThread" 9@x@0007f1b4e235ed9 in sys 
13 Thread @x7f1b378a2700 (LWP 1921) "Proxy resolver" @x@0007f1b4f38ad84 in pthr 
12 Thread @x7f1b36e81700 (LWP 1922) "MediaStreamDevi" @x@0007f1b4f38ad84 in pth 
11 Thread @x7f1b36680700 (LWP 1925) "BrowserBlocking" 0x00007f1b4f38ad84 in pth 
19 Thread 0x7f1b35e7f700 (LWP 1926) “BrowserWatchdog” 8x888687f1b4f38befe in pth 
9 Thread 6x7f1b3547b766 (LWP 1932) "Proxy resolver" @0x00007f1b4f38ad84 in pthr 
8 Thread 8@x7f1lb34c7a788 (LWP 1933) “Chrome_SafeBrow” 0x900007f1b4f38ad84 in pth 
7 Thread @x7f1b3117d700 (LWP 1935) "BrowserBlocking” @x@0007f1b4f38ad84 in pth 
6 Thread @x7f1b3097c700 (LWP 1936) "“renderer_crash_" @x@0007f1b4f38ad84 in pth 
5 Thread @x7f1b2fd19700 (LWP 1944) "Chrome_HistoryT" @x@0007f1b4f38b@fe in pth 
4 Thread @x7f1b2f4f8700 (LWP 1950) “NSS SSL ThreadW" @x8@007f1b4f38ad84 in pth 
3 Thread @x7f1b42981700 (LWP 2044) “WorkerPool/2044" @x@0007f1b4F38befe in pth 
2 Thread @x7f1b33e45700 (LWP 2067) “LevelDBEnv" 9x@0007f1b4f38ad84 in pthread_ 
Thread @x7f1b478bf980 (LWP 1902) “chrome” @x@0007f1b4e22e303 in poll () from 
图 3-11 ”Linux 平 台 下 Chromium 浏 览 器 的 Browser 进 程 的 线程 信息 


其 中 线程 1“chrome” 是 主线 程 ，“Chrome_IOThread” 线 程 就 是 IO 线 

程 。 中 间 还 有 很 多 其 他 的 线程 ， 用 来 处 理 视频 、 存 储 、 网 络 、 文 件 、 

音频 、 浏 览 历 史 等 。 之 所 以 很 多 现场 是 因为 这 些 线程 中 的 操作 可 能 是 
阻塞 式 的 ， 所 以 Chromium 需 要 置 于 单独 的 线程 。 


下 面 就 是 Renderer 进 程 中 的 线程 信息 。Renderer 进 程 至 少 有 4 个 线 
程 ， 之 后 可 能 会 有 更 多 的 线程 ， 这 是 因为 Chromium 和 希望 将 Blink 的 泻 
染 过 程 分 成 很 多 独立 的 阶段 ， 对 于 每 一 个 阶段 ， Sine a 
的 线程 ， 从 而 利用 CPU 的 多 核能 力 ， 加 快 网 页 的 泻 染 速 度 ， 这 就 像 流 
水 线 处 理 一 样 ， 可 以 极 大 地 提高 并 发 性 。 图 3-12 显 示 的 是 Linux 平 台 下 
Chromium 浏 览 器 的 Renderer 进 程 的 线程 信息 (查看 的 方法 同上 ) o 


Thread @x7ff16212a700 (LWP 9096) 
Thread @x7ff161929700 (LWP 9097) 
Thread @x7ff1607d2700 (LWP 9100) 
Thread 0x7ff163d4f980 (LWP 9095) 


PNW fs 


"“Chrome_ChildIOT" syscall () at ../sysdeps 
"VC manager" pthread_cond_wait@@GLIBC_2.3. 
"chrome" pthread_cond_wait@@GLIBC_2.3.2 () 
"chrome" pthread_cond_timedwait@@GLIBC_2.3 


图 3-12 ”Linux 平 台 下 Chromium 浏 览 器 的 Renderer 进 程 的 线程 信息 


其 中 线程 1“chrome” 是 主线 程 ，“Chrome 就 是 IO 线 
程 。 而 线程 2 的 名 字 也 是 “chrome”， 不 过 这 不 足 为 奇 , E 
程 ， 用 来 解释 HTML 文 档 ， ee te 


浏览 器 之 处 。 


对 于 GPU 等 进程 来 说 ， 结 构 就 要 简单 很 多 ， 基 本 就 是 一 


(处 理 逻 辑 ) 和 1IO 线 程 ， 请 读者 自行 查看 。 


3.3 WebKit2 


3.3.1 WebKit Æ MIRR 


相 比 于 狭义 的 WebKit，WebKit2 是 一 套 全 新 的 结构 和 接口 ， 而 不 
一 个 简单 的 升级 版 。 它 的 主要 目的 和 思想 同 Chromium 类 似 ， 就 是 将 
演 染 过 程 放 在 单独 的 进程 中 来 完成 ， 独立 于 用 户 界面 。 图 3-13 显 示 的 


是 webKit2 的 接口 和 使 用 方式 以 及 内 部 的 进程 模型 。 


一 个 新 的 线 


个 主线 程 


应 用 程序 
WebKit2 接口 


WebKit (UI 进程 ) 


WebKit (Web 进程 ) 


进程 JavaScript 引擎 


图 3-13 ”WebKit2 接 口 和 进程 模型 


网 络 


依旧 是 自 底 向 上 介绍 。 是 的 ，WebKit2 中 也 引入 了 插件 进程 ， 而 
且 它 还 引入 了 网 络 进程 。 图 中 的 “Web 进程 > 对 应 于 Chromium 中 的 
Renderer 进 程 ， 主 要 是 泻 染 网 页 。 在 这 之 上 的 是 “UI 进 程 >”， 它 对 应 于 
Chromium 中 的 Browser 进 程 。 接 口 就 暴露 在 该 进程 中 ， 应 用 程序 只 需 
调用 该 接口 即 可 。 其 中 “应 用 程序 ” 指 的 是 浏览 器 或 者 任何 使 用 该 接口 
的 程序 。 


3.3.2 WebKitÑĪ WebKit RARR 


WebKit 提 供 衣 入 式 接口 ， 该 接口 表示 其 他 程序 可 以 将 网 页 泻 染 记 

入 在 程序 中 作为 其 中 的 一 部 分 ， 或 者 用 户 界 面 的 一 部 分 。 当 然 这 只 是 

一 般 情 况 ， 不 代表 所 有 的 移植 都 是 这 样 。 gies Goes 

来 说 ， 它 的 接口 主要 用 于 Chromium 浏 览 BERRA TUN EAA 
Tho 


下 面 以 WebKit 的 EFL 移 植 部 分 为 例 。EFL 是 一 个 类 似 于 GTK 的 图 
形 工具 包 ， 被 应 用 在 开源 操作 系统 Tizen 中 。 在 WebKit 项 目 中 ， 狭 义 


WebKit 的 接口 主要 是 与 移植 相关 的 ewk_view 文 件 中 的 相关 类 。 其 主要 
思想 是 将 网 页 的 泻 染 结果 作为 用 户 界面 中 的 一 个 窗口 部 件 ， 从 这 个 角 
度 上 看 ， 这 跟 其 他 的 部 件 没有 什么 不 同 ， 区 别 在 于 它 用 来 显示 网 页 的 
内 容 。 总 结 这 些 接口 ， 按 功能 大 致 可 以 把 所 有 接口 分 成 六 种 类 型 : 第 
一 类 ， 设 置 加 载 网 页 、 获 取 加 载 进 度 、 停 止 加 载 、 重 新 加 载 等 ; 第 二 
类 ， 遍历 前 后 浏览 记录 类 ， 可 以 前 进 、 后 退 等 ; 第 三 类 ; 网 页 的 很 多 
设置 ， 例 如 缩放 、 主 题 、 背 景 、 模 式 、 编 码 等 ， 第 四 类 ， 查 找 网 页 的 
AA. BAS, 第 五 类 ， 触 控 事 件 、 鼠 标 事件 处 理 ; 第 六 “类 ， 查 看 网 
页 源 代 码 、 显 示 调 试 窗口 等 与 开发 者 相关 的 接口 。 这 也 是 通常 的 能 入 
式 接 口 提 供 的 功能 。 这 些 类 型 大 概 有 180 多 个 接口 ， 非 常 之 多 。 


WebKit2 接 口 不 同 于 WebKit 的 接口 ， 它 们 是 不 兼容 的 。 当 然 ， 目 
的 却 是 差不多 的 ， 都 是 提供 艇 入 式 的 应 用 接口 。WebKit2 接 口 大致 可 
以 分 为 两 个 大 的 部 分 ， 同 样 以 EFL 的 移植 部 分 为 例 加 以 说 明 。 


一 部 分 是 WebView 相 关 的 接口 ， 表 示 泻 染 的 设置 、 泻 染 过 程 、 
界面 等 ， 其 中 大 多 数 跟 各 个 移植 紧密 相关 。 这 里 有 三 个 主要 的 类 
们 被 各 个 移植 所 共享 。 


e WKView[Ref]: 表示 的 是 一 个 与 平台 相关 的 视图 ， 例 如 在 
Windows 上 它 表示 的 就 是 一 个 窗口 的 句柄 。 

e WKContextRef: 所 有 页 面 的 上 下 文 ， 这 些 被 共享 的 信息 包括 
local storage、 设 置 等 。 

。 WKPageRef: 表示 网 页 ， 也 就 是 浏览 的 基本 单位 。 


虽然 下 面 有 大 量 跟 移植 相关 的 类 ， 最 主要 的 接口 其 实 还 是 
ewk_view。 在 EFL 中 ，WebKit2 的 ewk_view 接 口 同 WebKit 还 是 比较 相 
似 的 ， 提 供 的 功能 也 类 似 ， 都 是 一 个 能 够 泻 染 网 页 的 窗口 部 件 。 但 


是 ， 其 接口 比 WebKit 的 部 件 少 很 多 ， 去 除 一 些 不 是 很 有 用 的 接口 ， 大 
概 还 有 48 个 接口 。 接 口 类 中 还 有 很 多 其 他 跟 移 植 相关 的 类 ， 它 们 很 多 
是 为 提供 该 窗口 部 件 服务 的 ， 例 如 历史 记录 等 。 


第 二 部 分 是 上 面 接口 依赖 的 基础 类 ， 它 们 被 各 个 移植 所 共享 ， 既 
包括 容器 、 字 符 串 等 基础 类 ， 也 包括 跟 网 页 相关 的 基础 类 ， 例 如 
URL、 请 求 、 网 页 设置 等 。 


WebKit2 还 有 一 部 分 接口 其 实 是 在 Web 进 程 里 的 ， 那 就 是 
WebBundle， 其 目的 是 让 某 些 移植 访问 DOM， 目 前 还 没有 明确 的 需 
求 。 


3.3.3 ”比较 WebKit2 和 Chromium 的 多 
进程 模型 以 及 接口 


前 面 提 到 WebKit2 的 多 进程 模型 参考 了 Chromium 的 模型 和 框架 ， 
而 且 WebKit2 也 提供 了 多 进程 之 上 的 接口 层 ， 那 么 这 二 者 有 什么 显著 
的 区 别 吗 ? 


图 3-14 详 细 描 述 了 WebKit 接 口 和 Chromium 的 多 进程 的 关系 ， 以 及 
和 Content 接 口 的 关系 。 前 面 笔 者 也 介绍 了 一 些 ， 例 如 Renderer 进 程 直 
接 调 用 WebKit 接 口 ， 以 及 和 Content 接 口 允 许 应 用 程序 注入 并 参与 
Content 之 下 各 个 进程 的 内 部 逻辑 。 


Browser 进程 接口 Renderer 进程 接口 GPU 进程 接口 | | 
Brower 进程 Renderer 进程 GPU 进程 | | 


WebKit 接口 


WebCore/JS Core 


Blink 


图 3-14 “Content 接口 详解 


首先 ，Chromium 使 用 的 仍然 是 WebKit 接 口 ， 而 不 是 WebKit2 接 
口 ， 也 就 是 说 Chromium 是 在 WebKit 接 口 之 上 构建 的 多 进程 架构 。 


其 次 ，WebKit2 的 接口 希望 尽量 将 多 进程 结构 隐藏 起 来 ， 如 图 3-13 
所 示 ， 这 样 可 以 让 应 用 程序 不 必 纠 缠 于 内 部 的 细节 ， 例 如 邮件 客户 端 
等 。 但 是 ， 对 Chromium 来 说 ， 它 的 主要 目的 是 给 Chromium 提 供 
Content 接 口 以 便 构 建 浏览 器 ， 其 本 身 目 标 不 是 提供 主 入 式 接口 ， 虽 然 
A CEFMB BF EME STRATE. 


最 后 ，Chromium 中 每 个 进程 都 是 从 相同 的 二 进 制 可 执行 文件 启 
动 ， 而 基于 WebKitz 的 进程 则 未 必 如 此 ， 这 当然 也 跟 二 者 的 设计 理念 
不 同 有 关 。 


(1) 在 目前 Chromium 依赖 的 Blink 中 ， 已 经 将 该 脚本 移 除 挤 了 ， 读 者 可 能 需要 参考 


www.chromium.org 上 的 指令 来 编译 它 。 


(2) 最 近 的 更 新 则 是 上 面 说 的 webKit 的 布局 测试 也 从 DumpRenderTree ( 它 基 于 WebKit 的 
Chromium 移 植 ， 而 不 是 Content) 移 到 这 一 层次 来 。 


O 这 有 严格 的 要 求 ， 详 细 的 情况 请 查看 以 下 链接 以 便 作 进一步 的 了 解 : 


http://www.chromium.org/developers/lock-and-condition-variableo 


(4) 在 Linux 中 也 是 类 似 的 情况 ， 但 是 稍微 有 些 不 同 ， 上 面 介绍 过 ， 这 里 不 再 痪 述 。 


第 4 章 ”资源 加 载 和 网 络 栈 


使 用 网 络 栈 来 下 载 网 页 和 网 页 中 的 资源 是 泻 染 引擎 工作 过 程 的 第 
一 步 ， 也 是 非常 消耗 时 间 的 步 又。 本 章 首先 介绍 网 页 的 资源 类 型 和 
WebKit 的 资源 加 载 机 制 ， 然 后 剖析 Chromium 的 多 进程 资源 加 载 和 缓存 
机 制 ， 以 及 高 性 能 的 网 络 技术 。 


4.1 ” WebKit 资源 加 载 机 制 
4.1.1 资源 


网 络 和 资源 加 载 是 网 页 的 加 载 和 泻 染 过 程 中 的 第 一 步 ， 也 是 必 不 
可 少 的 一 步 。 网 页 本 身 就 是 一 种 资源 ， 而 且 网 页 一 般 还 需要 依赖 很 多 
其 他 类 型 的 资源 ， 例 如 图 片 、 视 频 等 。 因 为 资源 的 加 载 涉 及 网 络 和 资 
源 的 缓存 等 机 制 ， 而 且 它 们 在 整个 泻 染 过 程 中 占 的 比例 并 不 少 。 本 章 
将 介绍 WebKit 如 何 获 取 资 源 以 及 如 何 高 效 地 管理 资源 。HTML 支 持 的 
资源 主要 包括 以 下 类 型 


HTML: HTML 页 面 ， 包 括 各 式 各 样 的 HTML 元 素 。 

JavaScript: _ JavaScript 代码， 可 以 内 和 髋 在 HIML 文 件 中 ， 也 可 以 
单独 的 文件 存在 。 

CSS 样 式 表 : _ CSS 样式 资源 ， 因 为 CSS 代 码 除 了 可 以 内 能 在 HTML 
还 可 以 以 单独 文件 形式 存在 。 

BA: 各 种 编码 格式 的 图 片 资源 ， 包 括 png、jpeg 等 。 当 然 还 有 一 
些 特殊 的 图 片 资源 ， 例 如 SVG 中 所 需 的 图 片 资 源 。 

SVG: 用 于 绘制 SVG 的 2D 矢 量 图 形 表示 。 


e CSS Shader: 支持 CSS Shader 文 件 ， 目 前 WebKit 支 持 该 功能 。 

。 视频 、 音 频 和 字幕 : 多 媒体 资源 及 支持 音 视 频 的 字幕 文件 
(TextTrack) 。 

。 字体 文件 : CSS 支 持 自 定 义 字体 ，CSS3 引 入 的 自 定 义 字 体 文 件 。 

。XSL 样 式 表 : 使 用 XSLT 语 言 编写 的 XSLT 代 码 文件 。 


上 面 这 些 资源 在 WebKit 中 均 有 不 同 的 类 来 表示 它们 ， 它 们 的 公共 
基 类 是 CachedResource。 图 4-1 中 表示 的 是 CachedResource 类 和 子 类 ， 
基本 上 可 以 和 上 面 的 资源 一 一 对 应 ， 其 中 有 个 地 方 笔者 需要 指出 的 就 
是 一 一 好 像 HTML 文 本 没有 对 应 的 资源 类 ， 其 实 不 然 ， 在 WebKit 中 ， 
它 的 类 型 叫 MainResource 类 ， 与 其 对 应 的 资源 类 型 叫 


CachedRawResource 类 。 


CachedCSSStyleSheet CachedXSLStyleSheet CachedTextTrack 


Vv 
CachedSVGDocument CachedRawResource 
OoOo as | 
VV 


CachedScript Cachedimage CachedF ont CachedShader 


图 4-1 WebKit 的 资源 类 


读者 可 能 会 好 奇 为 什么 资源 类 的 前 面 有 “Cached” 字 样 ， 其 实 这 是 
因为 效率 问题 而 引入 的 缓存 机 制 ， 所 有 对 资源 的 请 求 都 会 先 获取 缓存 
中 的 信息 ， 以 决定 是 否 向 服务 器 提出 资源 请 求 。 


41.2 ”资源 缓存 


资源 的 缓存 机 制 是 提高 资源 使 用 效率 的 有 效 方法 。 它 的 基本 思想 
是 建立 一 个 资源 的 缓存 池 ， 当 WebKit 需 要 请 求 资源 的 时 候 ， 先 从 资源 
闻 中 查找 是 否 存 在 相应 的 资源 。 如 果 有 ，WebKit 则 取出 以 便 使 用 ; 如 
果 没 有 ，WebKit 创 建 一 个 新 的 CachedResource 子 类 的 对 象 ， 并 发 送 真 
正 的 请 求 给 服务 器 ，WebKit 收 到 资产 后 将 其 设置 到 该 资源 类 的 对 象 中 
去 ， 以 便于 缓存 后 下 次 使 用 。 这 里 的 缓存 指 的 是 内 存 缓存 ， 而 不 同 于 
后 面 在 网 络 栈 部 分 的 磁盘 缓存 。 图 4-2 显 示 了 这 一 机 制 的 原理 。 


发 送 请 求 给 
网 络 模块 


该 资源 是 


EFE? 


图 4-2 ”资源 的 缓存 机 制 


WebKit 从 资源 池 中 查找 资源 的 关键 字 是 URL， 因 为 标记 资源 唯一 
性 的 特征 就 是 资源 的 URL。 这 也 意味 着 ， 假 如 两 个 资源 有 不 同 的 
URL， 但 是 它们 的 内 容 完全 一 样 ， 也 被 认为 是 两 个 不 同 的 资源 。 其 
实 ， 上 面 是 个 简单 的 示意 图 ， 真 实 的 过 程 比 这 里 要 复杂 ， 这 其 中 涉及 
到 了 资源 的 生命 周期 和 失效 机 制 。 


4.1.3 ”资源 加 载 器 


说 到 资源 加 载 器 ， 着 实 让 人 迷惑 ， 它 不 像 资源 那么 容易 理解 。 按 
照 加 载 器 的 类 型 来 分 ，WebKit 总 共有 三 种 类 型 的 加 载 器 。 


一 种 ， 针 对 每 种 资源 类 型 的 特定 加 载 器 ， 其 特点 是 仅 加 载 某 一 
n. 例如 对 于 “image” 这 个 HTML 元 素 ， 该 元 素 需 要 图 片 资源 ， 对 
应 的 特定 资源 加 载 器 是 ImageLoader 类 。 对 于 CSS 自 定义 字体 ， 它 的 特 
定 资源 加 载 器 是 FontLoader 类 。 这 些 资 源 加 载 器 没有 公共 基 类 ， 其 作 

用 就 是 当 需 要 请 求 资源 时 ， 由 资源 加 载 器 负责 加 载 并 隐藏 背后 复杂 的 
逻辑 。 加 载 器 属于 它 的 调用 者 ， 如 图 4-3 所 示 的 图 片 加 载 器 。 


图 4-3 ”特定 资源 加 载 器 


第 二 种 ， 资 源 缓 存 机 制 的 资源 加 载 器 的 特点 是 所 有 特定 加 载 器 都 

共享 它 来 查找 并 插入 缓存 资源 CachedResourceLoader 类 。 特定 加 

载 器 先是 通过 缓存 机 制 的 资 资源 加 载 器 来 查找 是 否 有 缓存 资源 ， 它 属于 
HTML 的 文档 对 象 ， 如 图 4-4 所 示 。 


ImageLoader 


1. 获取 CachedResourceLoader 


HTML 文档 


图 4-4 ”从 CachedResourceLoader 获 取 资 源 


2. 获取 资源 


CachedResourceLoader 


第 三 种 ， 通 用 的 资源 加 载 器 ResourceLoader 类 ， 是 在 WebKit 
需要 从 网 络 或 者 文件 系统 获取 资源 的 时 候 使 用 该 类 只 负责 获得 资源 的 
数据 ， 因 此 被 所 有 特定 资源 加 载 器 所 共享 。 它 属于 CachedResource 


X, (8 È [E] CachedResourceLoader 类 没有 继承 关系 (这 点 容易 混 
76) ， 如 图 4-5 所 示 。 


WebKit 网 络 模块 


图 4-5” 从 CachedResourceLoader 获 取 资 源 


之 所 以 WebKit 这 样 设 计 加 载 器 ， 主 要 还 是 因为 WebKit 想 将 其 中 的 
复杂 机 制 逐 渐 简 化 为 若干 简单 步骤。 但 是 ， 这 一 设计 确实 很 复杂 难 
E, 希望 以 后 能 够 更 加 清晰 化 。 


41.4 WE 


经 过 上 面 这 些 分 析 ， 相 信 读 者 对 资源 加 载 过 程 已 经 有 一 个 大 致 的 
印象 了 。 图 4-6 描 述 的 是 一 个 常 有 资源 缓存 机 制 的 资源 加 载 的 全 过 程 ， 
包括 资源 已 经 在 缓存 中 和 不 在 缓存 中 两 种 情况 。 


为 了 便于 说 明 这 一 过 程 ， 下 面 结合 一 个 实际 例子 加 以 说 明 资 源 是 
如 何 被 加 载 的 〈 也 就 是 整个 调用 过 程 ) 。 假 设 现 有 一 个 “img” 元 素 ， 其 
属性 “src” 的 值 是 一 个 有 效 的 URL 地 址 ， 那 么 当 HTML 解 析 器 解析 到 该 
元 素 的 该 属性 时 ，WebKit 会 创建 一 个 ImageLoader 对 象 来 加 载 访 资产， 
ImageLoader 对 象 通过 图 4-6 所 示 的 过 程 创 建 一 个 加 载 资 源 的 请 求 。 下 
面 笔者 将 所 涉及 的 类 都 包含 进来 ， 大 致 的 调用 顺序 也 是 从 上 到 下 。 具 
体 到 最 下 面 的 ResourceHandleInternal 类 ， 它 依赖 于 每 个 WebKit 移 植 的 


cel 
2R 
we 
各 
= 
© 

z 
= 

= 

证 

a 
a 
Ww 
GE 
HO 
ay 
Si 
= 
Hit 
2R 
i 
wt 
ae 
m 
=| 
i 
at 
> 


47) 


=Ho 


WebCore 
ResourceHandle 
WebKit Chromium 移植 ResourceHandleInternal 


图 4-6 PARRA Hl GNA 


鉴于 从 网 络 获取 资源 是 一 个 非常 耗 时 的 过 程 ， 通 常 一 些 资源 的 加 
载 是 异步 执行 的 ， 也 就 是 说 资源 的 获取 和 加 载 不 会 阻碍 当前 WebKit 的 
泻 染 过 程 ， 例 如 图 片 、CSS 文 件 。 当 然 ， 网 页 也 存在 某 些 特别 的 资源 
会 阻碍 主线 程 的 泻 染 过 程 ， 例 如 JavaScript 代 码 文件 。 这 会 严重 影响 
WebKit 下 载 资 源 的 效率 ， 因 为 后 面 可 能 还 有 许多 需要 下 载 的 资源 ， 
WebKit 怎 么 做 呢 ? 


因为 主线 程 被 阻碍 了 ， 后 面 的 解析 工作 疫 有 办 法 继续 往 下 进行 ， 
所 以 对 于 HTML 网 页 中 后 面 使 用 的 资源 也 没有 办 法 知道 并 发 送 下 载 请 
求 。 当 遇 到 这 种 情况 的 时 候 ，WebKit 的 做 法 是 这 样 的 : 当前 的 主线 程 


a WebKit 会 启动 另外 一 个 线程 去 遍历 后 面 的 HTML 网 页 ， 收 

需要 的 资源 URL， 然 后 发 送 请 求 ， 这 样 就 可 以 避免 被 阻碍 。 与 此 同 
WebKit 能 够 并 发 下 载 这 些 资 源 ， 甚 至 并 发 下 载 JavaScript 代 码 资 
原 。 这 种 机 制 对 于 网 页 的 加 载 提速 很 是 明显 。 


4.1.5 ”资源 的 生命 周期 


同 CachedResourceLoader 对 象 一 样 ， 资 源 池 也 属于 HIML 文 档 对 
象 。 关 于 HTML 文 档 ， 前 面 笔 者 在 介绍 网 页 框 结构 的 时 候 提 到 过 。 


问题 来 了 ， 资 源 池 中 的 资源 生命 周期 是 什么 呢 ? 资源 池 不 能 无 限 
大 ， 必 须要 用 相应 的 机 制 来 替换 其 中 的 资源 ， 从 而 加 入 新 的 资源 。 资 
源 闻 使 用 的 机 制 其 实 很 简单 ， 就 是 采用 LRU (Least Recent Used 最 近 最 
少 使 用 ) 算法 。 


另 一 方面 ， 当 一 个 资源 加 载 后 ， 通 常 它 会 被 放 入 资源 闻 ， 以 便 之 
后 使 用 。 问 题 是 ，WebKit 如 何 判 断 下 次 使 用 的 时 候 是 否 需要 更 新 该 资 
产 从 而 对 服务 器 重新 请 求 呢 ? 因为 服务 器 可 能 在 某 段 时 间 之 后 更 新 了 
该 资产 。 


考虑 这 样 的 场景 ， 当 用 户 打 开 网 页 后 ， 他 想 刷 新 当前 的 页 面 。 这 
种 情况 下 ， 资 源 池 会 出 现 怎 样 的 情况 呢 ? 是 清除 所 有 的 资源 ， 重 新 获 
得 呢 ? 还 是 直接 利用 当前 的 资源 ? 都 不 是 。 对 于 某 些 资产 ，WebKit 需 
要 直接 重新 发 送 请 求 ， 要 求 服务 器 端 将 内 容重 新 发 送 过 来 。 但 对 于 很 
多 资源 ，WebKit 则 可 以 利用 HTTP 协 议 减 少 网 络 负 载 。 在 HITP 协 议 的 
规范 中 对 此 有 规定 ， 浏 览 器 可 以 发 送 消息 确认 是 否 需要 更 新 ， 如 果 
有 ， 浏 览 器 则 重新 获取 该 资源 ; 否则 就 需要 利用 该 资源 。 


WebKit 的 做 法 是 ， 首 先 判 断 资源 是 否 在 资源 闻 中 ， 如 果 是 ， 那 么 
发 送 一 个 HTTP 请 求 给 服务 器 ， 说 明 该 资源 在 本 地 的 一 些 信息 ， 例 如 该 
资源 什么 时 间 修 改 的 ， 服 务 器 则 根据 该 信息 作 判 断 ， 如 果 没 有 更 新 ， 
服务 器 则 发 送 回 状态 码 304， 表 明 无 需 更 新 ， 那 么 直接 利用 资源 闻 中 原 
来 的 资源 ; 否则 ，WebKit 申 请 下 载 最 新 的 资源 内 容 。 


4.1.6 SR: 资源 的 缓存 


下 面 笔者 以 实际 的 例子 来 说 明 资 源 的 缓存 机 制 。 因 为 Chrom 浏 览 
器 的 开发 者 工具 可 以 设置 打开 或 者 关闭 该 机 制 ， 所 以 ， 读 者 可 以 很 方 
便 地 理解 资源 的 缓存 机 制 ， 具 体 步 又 如 下 。 


1. 依旧 打开 Chrome 浏 览 器 和 它 的 开发 者 工具 ， 然 后 在 地 址 栏 中 输入 
www.baidu.com 并 单 击 开 发 者 工具 的 “network” 按 钮 。 

2. 打开 开发 者 工具 的 “设置 ”按钮 ， 在 “General” 标 签 页 中 的 “Disable 
Cache” 前 打 钧 ， 然 后 关 掉 设置 界面 。 

3. 重新 刷新 页 面 (或 者 按键 盘 F5 键 ) ， 得 到 图 4-7 所 示 的 结果 。 特 别 
要 关注 的 是 资源 “bdlogo.gif”， 单 击 它 可 以 看 到 该 资源 的 HTTP 请 求 
和 HTTP 返 回 结果 。 从 图 中 读者 看 到 , “bdlogo.gif” 成 功 地 被 浏览 
重新 从 网 络 申请 到 了 资源 。 


Elements Resources | He 


Name 
Path 


| www.baidu.com 
,| bdlogo.gif 
| i-1.0.0.png 
Lol mg 
| gs.gif 
ch jlobal/img 


prr SELO 


u EEA 


FERR 1.3.4c1.0_ 000204 bs 


su?wd=&cb=window.bdsug... 


Timeline Profiles Audits Console PageSpeed 
Methoda Sete Type Initiator wae Tine 
ontent Latency 

200 4.8KB 36 
GET a text/html aie on 

200 „baidu. /1 1.8KB 12 
GET ni image/gif ae -人 i ee 
GET 2 eae pi 人 全 sty 12 me 
GET a erat ee 400B = a 

200 fear aes . www.baidu.com/:1 .1KB 883m 
GET D application/javascript EE 二 

200 pena . 7 www.baidu.com/:1 8.4KB 875ms 
GET m application/javascript 0 panes eas 

200 BS es . www.baidu.com/:1 4.0KB 879m 
GET Ok application/javascript aes gg KB oe 

200 h f949edf5.js:23 259B 150 
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Ld cript 400 r 


图 4-7 不 带 资 源 缓 存 的 资 


资源 加 载 


4. 打开 开发 者 工具 的 “设置 > 按钮 ， 在 “General” 页 中 把 *Disable 
Cache” 前 的 钩 去 掉 ， 然 后 关 掉 设置 界面 。 


Sama, mM 


ree gif"， 读 者 会 发 现 它 的 状态 码 变 成 304， 表 明 资 源 ; 
， 可 直接 利用 资产 池 中 的 资源 。 是 什么 带 来 第 3 步 和 第 5 步 中 


se ane? 原因 在 于 打开 或 者 关闭 “cache” 机 制 |。 
会 发 送 不 同 的 HTTP 头 来 请 求 资源 。 


ZFF, WebKit 


会 得 到 如 图 4-8 所 示 的 结果 。 继 续 关 注资 产 


SARE 


在 这 两 种 不 同 的 
图 4-9 告 诉 读 


者 这 发 生 的 一 切 ， 图 中 左边 表示 的 是 第 3 步 中 的 资源 请 求 HTTP 
头 ， 而 图 中 右边 表示 的 则 是 第 5 步 中 的 资源 


中 加 粗 的 部 分 。 


请 求 HTTP 头 ， 


注意 其 


Name Status gi Size Time 
Path EEE Text Type ELSES Content | Latency 
z on nk 3 
站 GET text/html Other eee aa 
=a u.o cums 
z ,gi „baidu. /1 7 1 
E baloga gif GET 25 l peri www.baidu.com, a : oms 
Ld /img Not Moc Parser 1.5KB 10 ms 
i-1.0.0.png 304 s s www.baidu.com/:1 2078 11 ms 
二 /img GET Not Mox mege pog Parser 607 B 10 ms 
gs.gif 304 : a www.baidu.com/:1 2068 11 ms 
LSJ /cache/global/img SE a oe oe Parser 91B 10ms 
home_f949edf5.js GET 304 Pe EGH www.baidu.com/:1 334B 862 ms 
= s1.bdstatic.com/r/www/cache Not Mox PEN ENSET Parser 28.0 KB 851 ms 
-| tangram-1.3.4c1.0_070384... 304 ae . 7 www.baidu.com/:1 334B 856 ms 
fore y ee hice ag, @Pplication/javascript nn `; 3 ae 
GS s1.bdstatic.com/r/www/cache Not Moc Parser 22,0 KB 850 ms 
| u_T5caac89.js 304 ee ; 3348 860 ms 
_ 加 ___,_,| GED hye ag... application/javascript eae zz 
G s1.b n/r/www/cache, Not Mox F 9,8 KB 85 
-| 200 4 3 h f949edf5.js:23 259B 148 
GET Ok baiduapp/json = suet a B pE 
0 Scrip 8B 8ms 


带 资 源 缓存 的 资源 加 载 结 


URL:http://www.baidu.com/img/bdlogo.gif URL:http://www.baidu.com/img/bdlogo.gif 
Request Method:GET Reque Method:GET 

Status Code:200 OK Status Code:304 Not Modified 

Request Headersview source Request Headersview source 

Accept: image/webp, */*;q=0.8 -cept:image/webp, */*;q=0.8 


Ac »t-Encoding: gzip, decina, sdch cept-Encoding:gzip,deflate, sdch 
Accept-Language:en-US, en; q=0.8 Accept-Language:en-US, en; q=0.8 
Cache-Control:no-cache Cache-Control:max-age=0 

Connection: keep-alive Connection: keep-alive 

Cookie: BAIDUID=B06BA5D4D824BEF330014A3BD Cookie: BAIDUID=B0 6BA5D4D82 4BEF330014A3BD 
57F570E:FG=1; BDSVRTM=18; 57F570E: ; BDSVRTM=5; 


SID=2 


90 2501 1447 2487 1788 2548 D=2490 2501 1447 2487 1788 2548 


Host: www.baidu.com :www.baidu.com 


he If-Modified-Since:Fri, 22 Feb 2013 03:45:02 
Referer:http://www.baidu.com/ GMT 
User-Agent :Mozilla/5.0 (X11; Linux x86 64) If-None-Match:"627-4d648041£6b80" 
AppleWebKit/537.36 (KHTML, like Gecko) Referer:http://www.baidu.com/ 
Chrome/29.0.1502.0 Safari/537.36 User-Agent :Mozilla/5.0 (X11; Linux X86 


AppleWebKit/537.36 (KHTML, like 


Chrome/29.0.1502.0 Safari/537.36 


4-9 ”两 种 不 同类 型 的 HTTP 消 息 请 3 


那么 ， 当 用 户 单 击 “ 关 闭 缓存 ”按钮 的 时 候 ，WebKit 背 后 在 做 什么 

呢 ? 图 4-10 解 释 了 内 部 的 工作 方式 。 最 上 面 的 是 Chrom 的 开发 者 工具 
(DevTools) 直接 清除 掉 MemoryCache 对 象 中 的 所 有 资源 ， 
MemoryCache 对 象 是 全 局 唯一 的 。 在 清除 掉 该 对 象 中 的 资源 之 后 ， 

WEK Alm SENA E EN 所 以 ， 经 过 上 面 的 第 三 步 之 后 

WebKit 会 打开 缓存 机 制 。 这 是 因为 在 执行 第 三 步 的 时 候 ，WebKit 会 先 


清除 掉 资 源 闻 中 的 资源 只 ， 而 本 身 第 三 步 的 资源 则 会 保存 在 资源 DER, 
并 立刻 生效 。 所 以 之 后 执行 第 五 步 时 ，WebKit 立 刻 就 可 以 使 用 第 三 步 
缓存 的 资产 。 


WebKit::WebDevToolsAgentImpl::dispatchOnInspectorBackend 


WebCore::InspectorController::dispatch MessageFromFrontend 


WebCore::InspectorBackendDispatcherlmpl::Network_setCacheDisabled 


WebCore::InspectorBackendDispatcherImpI::dispatch 


WebCore::InspectorResourceA gent::setCacheDisabled 


WebCore::MemoryCache::evictResources 


WebCore::MemoryCache::setDisabled 


图 4-10 ”设置 取消 缓存 的 调用 材 


4.2 ”Chromium 多 进程 资源 加 载 
4.2.1 ”多 进程 


资源 的 实际 加 载 在 各 个 WebKit 移 植 中 有 不 同 的 实现 。Chromium 采 
用 的 是 多 进程 的 资产 加 载 机 制 。 


回顾 图 4-6 关 于 带 有 资源 缓存 机 制 的 资源 加 载 过 程 描 述 ， 在 
ResourceHandle 类 之 下 的 部 分 ， 是 不 同 移植 对 获取 资源 的 不 同 实现 。 
在 Chromium 中 ， 获 取 资 源 的 方式 是 利用 多 进程 的 资源 加 载 架构 。 图 4- 


11， 描 述 了 关于 Chromium 如 何 利用 多 进程 架构 来 完成 资源 的 加 载 ， 主 
要 是 多 个 Renderer 进 程 和 Browser 进 程 之 间 的 调用 栈 涉及 的 主要 类 。 


net::URLRequest 
content::ResourceLoader 
ResourceDispatcherHostImpl 


ResourceMessageF ilter 


IOThread Browser 进程 


IOThread 


ResourceDispatcher 


IPCResourceLoaderBridge 


WebKit/Chromium WebURLLoaderImpl 
实现 


ResourceHandleInternal 


Care ResourceHandle Renderer 进程 


图 4-11 “Chromium 的 多 进程 资源 加 载 


Renderer 进 程 在 网 页 的 加 载 过 程 中 需要 获取 资产 ， 但 是 由 于 安全 
性 (实际 上 ， 当 阔 箱 模 型 打开 的 时 候 ，Renderer 进 程 是 没有 权限 去 获 
取 资 源 的 ) 和 效率 上 (资源 共享 等 问题 ) 的 考虑 ，Renderer 进 程 的 资 
源 获 取 实 际 上 是 通过 进程 间 通 信 将 任务 交 给 Browser 进 程 来 完成 ， 
Browser 进 程 有 权限 从 网 络 或 者 本 地 获取 资源 。 


在 Chromium 架 构 的 Renderer 进 程 中 ，ResourceHandleInternal 类 通 


N 


过 IPCResource-LoaderBridge 类 [E] Browser 进程 通信 。 
IPCResourceLoaderBridge 类 继承 自 ResourceLoaderBridge 类 ， 其 作用 是 


负责 发 起 请 求 的 对 象 和 回复 结果 的 解释 工作 ， 实 际 消息 的 接收 和 派发 


I 
交 给 ResourceDispatcher 类 来 处 理 。 


在 Browser 进 程 中 ， Far Our Mes de mle! 
进程 的 消息 ， 如 果 与 资源 请 求 相 关 ， 则 该 过 滤 类 转发 请 求 给 
ResourceDispatcherHostImpl 类 ， 随 即 ResourceDispatcherHostImpl1 类 创 
建 Browser 进 程 中 的 ResourceLoader 对 象 来 处 理 。ResourceLoader 类 是 
Chromium 浏 览 器 实际 的 资源 加 载 类 ， 它 负责 管理 向 网 络 发 起 的 请 求 、 
从 网 络 接收 过 来 的 认证 请 求 、 请 求 的 回复 管理 等 工作 。 因 为 这 其 中 每 
项 都 有 专门 的 类 来 负责 ， 但 都 是 由 ResourceLoader 类 统一 管理 。 从 网 
络 或 者 本 地 文件 读 取 信息 的 是 URLRequest 类 ， 实 际 上 它 承 担 了 建立 网 
络 连接 、 发 送 请 求 数 据 和 接受 回复 数据 的 任务 ，URLRequest 之 后 的 工 
作 将 在 “网 络 栈 ”章节 中 来 解读 。 


4.2.2 ”工作 方式 和 资源 共享 


资源 请 求 有 同步 和 异步 两 种 方式 。 前 面 说 了 ResourceLoader 类 承 
担 了 Browser 进 程 中 有 关 资 源 的 总 体 管理 任务 ， 对 于 同步 和 异步 两 种 资 
源 请 求 方 式 ， ResourceLoader 类 使 用 SyncResourceHandle 类 和 
AsyncResourceHandle 类 来 向 Renderer 进 程 发 送 状态 消息 ， 并 接收 
Renderer 进 程 对 这 些 消息 的 反馈 ， 图 4-12 描 述 了 这 些 类 之 间 的 关系 。 


ResourceHandle SyncResourceHandle 
-OnUploadProgress() 


-OnRequestRedirected() 


-OnResponseStarted() AsyncResourceHandle 
-OnReadCompleted() 


-OnResponseCompleted() 
-OnDataDownloaded() LayeredResourceHandle 
BufferedResourceHandle 


图 4-12 ”ResourceHandle 及 其 资源 请 求 方式 


ThrottlingResourceHandle 


读者 还 会 发 现 图 4-12 中 还 有 两 个 ResourceHandle 子 类 ， 第 一 个 是 
LayeredResourceHandle 类 , € [E] SyncResourceHandle 类 和 
AsyncResourceHandle 类 不 一 样 ， 目 己 不 直接 参与 资产 的 处 理 ， 而 是 将 
处 理 转 给 另 一 个 ResourceHandle 对 象 。LayeredResourceHandle 类 没有 实 
际 意 义 ， 仅 是 BufferedResourceHandle 的 父 类 。 该 缓冲 类 用 来 缓冲 网 络 
或 者 文件 传 过 来 的 数据 ， 直 到 数据 足够 满足 需求 然后 转 给 设置 的 另 一 
个 ResourceHandle 对 象 。Throttling-ResourceHandle 类 是 在 面 对 很 多 个 
资源 请 求 时 仪 使 用 一 个 URLRequest 对 象 来 获取 资源 ， 这 可 以 有 效 地 减 
少 网 络 的 开销 ， 因 为 不 需要 重新 建立 多 个 网 络 连接 。 


此 外 ， 在 Chromium 中 还 有 很 多 ResourceHandle 的 子 类 ， 它 们 的 作 
用 各 异 。 


e RedirectToFileResourceHandler: 44 7 H LayeredResourceHandle 
类 ， 在 接收 到 的 数据 转 给 另 一 个 ResourceHandler 类 的 同时 ， 转 存 
到 文件 。 

e StreamResourceHandler: 继承 自 LayeredResourceHandle 类 ， 在 
接收 到 的 数据 转 给 另 一 个 ResourceHandler 的 同时 ， 转 存 到 数据 


流 。 


CertificateResourceHandler: 主要 处 理 证 书 类 的 资源 请 求 。 


资源 统一 交 由 Browser 进 程 来 处 理 ， 这 使 得 资源 在 不 同 网 页 间 的 共 
享 变 得 很 容易 。 接 下 来 面临 一 个 问题 ， 因 为 每 个 Renderer 进 程 某 段 时 
间 内 可 能 有 多 个 请 求 ， 同 时 还 有 多 个 Renderer 进 程 ，Browser 进 程 需 

处 理 大 量 的 资源 请 求 ， 这 就 需要 一 个 处 理 这 些 请 求 的 调度 器 ， 这 就 是 


Chromium 中 的 ResourceScheduler。 


ResourceScheduler 类 管理 的 对 象 就 是 图 4-11 中 最 顶层 类 
net:: URLRequest¥t&. ResourceScheduler 类 根据 URLRequest 的 标记 和 
优先 级 来 调度 URLRequest 对 象 ， 每 个 URLRequest 对 象 都 有 一 个 ChildId 
和 RouteId 来 标记 属于 哪个 Renderer 进 程 。ResourceScheduler 类 中 有 一 
个 哈 希 表 ， 该 表 按 照 进程 来 组 织 URLRequest 对 象 。 对 于 以 下 类 型 的 网 
络 请 求 ， 立 即 被 Chromium 发 出 : GD 高 优先 级 的 请 求 ; DAHAR; © 
具有 SPDY (一 种 新 协议 ) 能 力 的 服务 器 。 


以 上 讨论 部 分 的 代码 均 在 Chromium 的 目录 “content/browser/loader” 
中 ， 感 兴趣 的 读者 可 以 自行 深入 了 解 。 


4.3 MAR 
4.3.1 WebKit 的 网 络 设施 


WebKit 的 资源 加 载 其 实 是 交 由 各 个 移植 来 实现 的 ， 所 以 WebCore 
其 实 并 没有 什么 特别 的 基础 设施 ， 每 个 移植 的 网 络 实现 是 非常 不 一 样 


的 。 


从 WebKit 的 代码 结构 中 可 以 看 出 ， 网 络 部 分 代码 的 确 是 比较 少 

的 ， 它 们 都 在 目录 “WebKit/Source/WebCore/platform/network” 中 。 主 要 

是 一 些 HTTP 消 息 头 、MIME 消 息 、 状 态 码 等 信息 的 描述 和 处 理 ， 没 有 
实质 的 网 络 连 接 和 各 种 针对 网 络 的 优化 。 


4.3.2 ”Chromium 网 络 栈 


前 面 讲 到 资源 加 载 ， 拉 述 到 URLRequest 类 的 时 候 夏 然而 止 ， 这 是 
因为 URLRequest 类 之 下 的 部 分 是 网 络 栈 的 内 容 ， 本 节 重 点 描述 
Chromium 的 网 络 栈 结构 。 


4.3.2.1 ”网 络 栈 基本 组 成 


读者 想 要 了 解 Chromium 中 网 络 栈 的 基本 组 成 ， 其 实 这 一 结构 并 不 
复杂 ， 可 以 通过 代码 目录 直接 观察 到 ， 图 4-13 是 “net" 所 包括 的 主要 子 
目录 ， 也 是 Chromium 网 络 栈 的 主要 模块 。 


sre/net 


android 


base 


cert 


cookies 


disk_cache 


dns 


ftp 


http 


proxy 


quic 


socket 


spdy 


ssl 


udp 


url_request 


websockets 


针对 Android 系统 的 特殊 网 络 处 理 

各 种 各 样 的 基础 设施 

证 书 管理 模块 

浏览 器 cookie 管理 等 工作 

人 磁盘 文件 缓存 

域名 解析 和 优化 

支持 FTP 协议 传输 

支持 HTTP 协议 传输 

代理 的 相关 设置 代码 

针对 UDP 协议 进行 优化 的 新 协议 

各 种 平台 的 TCP socket 的 连接 、 关 闭 等 工作 
SPDY 网 络 协议 的 支持 代码 

SSL 安全 机 制 的 支持 

Udp 协议 传输 

支持 URLRequest、URLRequestContext 和 URLRequestJob 等 主要 类 


支持 HTMLS 新 规范 WebSockets 


图 4-13 ”Chromium 网 络 模块 的 代码 结构 


这 里 面 除 了 一 些 基 础 的 部 分 ， 例 如 HTTP 协 议 、DNS 解 析 等 模块 ， 
还 包含 了 Chromium 为 了 减少 网 络 时间 而 引入 的 新 技术 ， 例 如 SPDY、 


QUIC 等 。 


4.3.2.2 WARAH 


下 面 进 行 Chromium 的 网 络 栈 调用 过 程 冲 析 。 读 者 可 以 先 查 看 一 下 
‘nhet” 目 录 下 的 子 目 录 ， 大 人 致 了 解 主要 的 子 模块 。 图 4-14 描 述 了 从 


URLRequest 类 到 Socket 类 之 间 的 调用 过 程 。 以 HTTP 协 议 为 例 ， 图 中 列 
出 建立 TCP 的 socket 连 接 过 程 中 涉及 的 类 。 


URLRequest 
URLRequestJob(Http) URLRequestJobFactory 
HttpNetworkTransaction 


HttpNetworkSession 
en = 


ClientSocketPool 


图 4-14 ”网 络 栈 的 调用 过 程 剖 析 


首先 是 URLRequest 类 被 上 层 调 用 并 启动 请 求 的 时 候 ， 它 会 根据 
URL 的 “scheme” 来 决定 需要 创建 什么 类 型 的 请 求 。“scheme” 也 就 是 
URL 的 协议 类 型 ， 例 如 “http:/”、“file:W//*， 也 可 以 是 自 定义 的 scheme， 
例如 Android 系 统 的 “file://android_asset/”。 URLRegquest 对 象 创建 的 是 一 
个 URLRequestJob 子 类 的 一 个 对 象 ， 例 如 图 中 的 URLRequestHttpJob 
类 。 为 了 支持 自 定义 的 scheme 处 理 方式 ，Chromium 使 用 工厂 模式 。 
URLRequestJob 类 和 它 的 工厂 类 URLRequestJobFactory 的 管理 工作 都 由 
URLRequestJobManager 类 负责 。 基 本 的 思路 是 ， 用 户 可 以 在 该 类 中 注 
有 册 多 个 工厂 ， 当 有 URLRequest 请 求 时 ， 先 由 工厂 检查 它 是 否 需 要 处 理 
该 “scheme”， 如 果 没 有 ， 工 厂 管理 类 继续 交 给 下 一 个 工厂 类 来 处 理 。 
最 后 ， 如 果 没 有 任何 工厂 能 够 处 理 ，Chromium 则 交 给 内 置 的 工厂 来 检 
查 和 处 理 是 否 为 “http:/”、“ftp://” 或 者 “file://* 和 等， 图 4-15 用 来 描述 这 些 
类 的 关系 。 


URLRequest 


| <<Use>> 


URLRequestJobManager 


+CreateJob() 


URLRequestJobFactory i 


+lsHandledProtocoll(} 
AN 


AURLRequestJobFactory URLRequestHttpJob 


4-15 ”URLRequestJob 的 管理 、 创 建 和 扩展 


URLRequestJob 


A 


create 


其 次 ， 当 URLRequestHttpJob 对 象 被 创建 后 ， 该 对 象 首 先 从 Cookie 
管理 器 中 获取 与 该 URL 相 关联 的 信息 。 之 后 ， 它 同样 借助 于 
HttpTransactionFactory 对 象 创建 一 个 HttpTransaction 对 象 来 表示 开启 一 
个 HTTP 连 接 的 事务 (当然 这 里 的 概念 不 同 于 数据 库 中 的 事务 概念 ) 。 
通常 情况 下 ，HttpTransactionFactory 对象 对 应 的 是 一 个 它 的 子 类 
HttpCache 对象。 HttpCache 类 使 用 本 地 磁盘 缓存 机 制 〈《 稍 后 会 介 
绍 ) ， 如 果 该 请 求 对 应 的 回复 已 经 在 磁盘 缓存 中 ， 那 么 Chromium 无 需 
再 建立 HttpTransaction 来 发 起 连接 ， 而 是 直接 从 磁盘 中 获取 即 可 。 如 果 
磁盘 中 没有 该 URL 的 缓存 ， 同 时 如 果 目 前 该 URL 请 求 对 应 的 
HttpTransaction 已 经 建立 ， 那 么 只 要 等 待 它 的 回复 即 可 。 当 这 些 条 件 都 
不 满足 的 时 候 ，Chromium 实 际 上 才 会 真正 创建 HttpTransaction 对 象 。 


再 次 ，HttpNetworkTransaction 类 使 用 HttpNetworkSession 类 来 管理 
连接 会 话 。 HttpNetworkSession 类 通过 它 的 成 员 HttpStreamFactory 对 象 
来 建立 TCP Socket 连 授 ， 之 后 Chromium 创建 HttpStream W KR o 
HttpStreamFactory 对 象 将 和 网 络 之 间 的 数据 读 写 交 给 自己 新 创建 的 一 
个 HttpStream 子 类 的 对 象 来 处 理 。 


最 后 是 套 接 字 的 建立 。Chromium 中 与 服务 器 建立 连接 的 套 接 字 是 
StreamSocket 类 ， 它 是 一 个 抽象 类 ， 在 POSIX 系 统 和 Windows 系 统 上 有 


着 分 别 不 同 的 实现 。 同 时 ， 为 了 支持 SSL 机 制 ，StreamSocket 类 还 有 一 
个 子 类 一 一 SSLSocket。 图 4-16 显 示 了 这 些 类 和 它们 之 间 的 关系 。 


TCPClientSocketLibevent TCPClientSocketWin 


Y V 


A A 


BufferedWriteStreamSocket SSLSocket 


图 4-16 ”StreamSocket 类 和 子 类 


4.3.2.3 ”代理 


当 用 户 设置 代理 时 ， 上 面 的 网 络 栈 结构 是 如 何 组 织 的 呢 ? 用 户 代 
理 依赖 以 下 类 来 处 理 。 


e ProxyService : 对 于 一 个 URL HttpStreamFactory 类 使 用 
ProxyService 类 来 获取 代理 信息 。ProxyService 类 首先 会 检查 当前 
的 代理 设置 是 不 是 最 新 的 ， 如 果 不 是 ， 它 依赖 ProxyConfigService 
来 重新 获取 代理 信息 。 该 类 不 处 理 实际 任务 ， 而 是 使 用 
ProxyResolver 类 来 做 实际 的 代理 工作 。 

。 ProxyConfigService: 获取 代理 信息 的 类 ， 可 获取 平台 上 的 代理 
设置 ， 在 Linux、Windows 上 有 不 同 的 实现 。 

e ProxyScriptFetcher: _ Chromium 支持 代理 的 JavaScript 脚 本 ， 该 类 
负责 从 代理 的 URL 中 获取 该 脚本 。 


e ProxyResolver: 实际 负责 代理 的 解释 和 执行 ， 通 剃 局 用 新 的 线程 
来 处 理 ， 因 为 当前 可 能 会 被 域名 的 解析 所 阻碍 。 

e ProxyResolverV8: ProxyResolver 的 子 类 ， 使 用 V8 引擎 来 解析 和 
执行 脚本 。 


图 4-17 不 仪 描述 上 面 这 些 类 ， 同 时 也 描述 了 Chromium 中 获取 网 络 
代理 的 过 程 。 图 中 数字 代表 获取 网 络 代理 的 次 序 ， 其 中 的 分 支 3.1 和 4.1 
分 别 表示 简单 的 代理 设置 和 代理 脚本 设置 的 处 理 过 程 。 


ProxyScriptFetcher ProxyResolverV8 


图 4-17 ”网络 代 理 的 获取 过 程 


4.3.2.4 ”域名 解析 (DNS) 


通常 情况 下 ， 用 户 都 是 使 用 域名 来 访问 网 络 资源 的 ， 所 以 在 建立 
TCP 连 接 前 需要 解析 域名 。Chromium 中 使 用 HostResolverImpl 类 来 解析 
域名 ， 上 有 具体 调 用 的 函数 是 “getaddrinfo0”， 该 函数 是 一 个 阻塞 式 的 团 
数 ， 所 以 Chromium 理 所 当然 使 用 单独 的 线程 来 处 理 它 ， 这 是 
Chromium 的 原则 之 一 。 因 此 ， 当 读者 调试 Chromium 的 进程 时 ， 如 果 
看 到 很 多 线程 被 创建 然后 退出 不 必 感 到 惊讶 。 


同样 ， 为 了 考虑 效率 ， 使 用 HostCache 类 来 保存 解析 后 的 域名 ， 最 
多 时 会 有 多 达 1000 个 的 域名 和 地 址 映射 关系 会 被 存储 起 来 。 看 起 来 
DNS 的 解析 很 简单 ， 好 像 也 没有 什么 值得 深究 的 ， 其 实 不 然 ， 域 名 解 
析 也 可 以 有 优化 的 空间 ， 因 为 优化 可 以 有 效 的 减少 用 户 等 待 的 时 间 ， 
稍 后 会 介绍 DNS 预 解析 机 制 。 


读者 如 果 想 要 了 解 当 前 域名 解析 详情 和 HostCache 中 的 信息 ， 可 以 
通过 在 Chrome 浏 览 器 的 地 址 栏 中 输入 chrome://net-internals/#dns 来 查 
看 ， 你 甚至 可 以 手动 将 它们 清除 掉 。 图 4-18 是 HostCache 中 的 部 分 项 ， 
限于 篇 幅 ， 没 有 全 部 列 出 ， 读 者 可 以 自行 尝试 。 图 中 最 上 面 的 “Clear 
host cache” 按 钮 就 是 用 来 清除 缓存 中 的 信息 的 。 


Host resolver cache Clear host cache 
e Capacity: 1000 


Current State 


Hostname | lily Addresses | pires 
| 1-ps.googleusercontent.com _ _[IPV __|173.194.72.132 = 2013-06-0 
| 


126.am 


Ct ! 


ad- puede ick.net | IPV. aa Sr, [2013-06-08 21:30:38.625 [Expired] 
UO. :I00 | 


| 
apis.google.com P\ eo hh he peta |2013-06-08 21:31:08.414 [Expired] 
| 


图 4-18 Chromium 的 HostCache 信 息 节选 


4.3.3 ”磁盘 本 地 缓存 


想象 一 下 没有 磁盘 缓存 的 世界 一 一 当 用 户 访问 网 页 的 时 候 ， 每 次 
浏览 器 都 需要 从 网 站 下 载 网 页 、 图 片 、JS 等 资源 ， 这 其 实 费 力 又 不 讨 


好 。 解 决 这 一 问题 的 方法 就 是 将 之 前 浏览 器 下 载 的 资源 保存 下 来 ， 存 
到 磁盘 中 ， 以 备 今后 使 有用。 当然， 资源 是 有 时 效 性 的 ， 也 会 变 得 不 再 
有 效 ， 所 以 需要 有 相应 的 退出 机 制 来 解决 这 一 问题 。 目 前 ， 绝 大 多 数 
浏览 器 都 有 磁盘 缓存 机 制 ， 因 为 缓存 机 制 确实 能 够 提高 网 页 的 加 载 速 
度 。 


4.3.3.1 ”特性 


为 了 适应 网 络 资源 的 本 地 缓存 需求 ，Chromium 的 本 地 磁盘 缓存 有 
几 个 特性 或 者 要 求 。 


虽然 需要 缓存 的 资源 可 能 很 多 ， 但 磁盘 空间 不 是 无 限 大 的 ， 所 以 
必须 要 有 相应 的 机 制 来 移 除 合适 的 缓存 资源 ， 以 便 加 入 新 的 资 
产 。 
能 够 确保 在 浏览 器 朋 溃 时 不 破坏 磁盘 文件 ， 至 少 能 够 保护 原先 在 
磁盘 中 的 数据 。 
能 够 高 效 和 快速 地 访问 磁盘 中 现 有 的 数据 结构 ， 支 持 同步 和 异步 
两 种 访问 方式 。 
能 够 避免 同时 存储 两 个 相同 的 资源 。 

能 够 很 方便 地 从 磁盘 中 删除 一 个 项 ， 同 时 可 以 在 操作 一 个 项 的 时 
候 不 受 其 他 请 求 的 影响 。 
磁盘 不 支持 多 线程 访问 ， 所 以 需要 把 所 有 磁盘 缓存 的 操作 放 入 单 
独 的 一 个 线程 。 
升级 版 本 时 ， 如 果 磁 盘 缓 存 的 内 部 存储 结构 发 生 改变 ，Chromium 
仍然 能 够 支持 老 版 本 的 结构 。 


E e 的 需要 ， 同 时 也 是 Chromium 的 设计 目标 ， 
让 我 们 一 起 看 看 下 面 介 细 的 结构 是 如 何 做 这些 的 。 


4.3.3.2 ”结构 


在 理解 内 部 结构 之 前 ， 首 先 来 看 一 看 这 一 机 制 对 外 的 接口 设计 ， 
笔者 认为 这 个 接口 的 设计 很 清晰 简单 (与 Chromium 中 的 一 些 其 他 接口 
比较 ) ， 主 要 有 两 个 类 : Backend 和 Entry。Backend 类 表示 整个 磁盘 缓 
存 ， a E 表示 的 是 一 个 缓存 表 。Entry 
类 指 的 是 表 中 的 表 项 。 缓 人 存 通 单 是 一 个 表 ， 对 于 整个 表 的 操作 作用 在 
Backend 类 上 ， 包 括 创 建 表 中 的 一 = RAG, 每 个 项 由 关键 字 来 唯一 确 
定 ， 这 个 关键 字 就 是 资源 的 URL。 而 对 项 目 内 的 操作 ， 包 括 读 写 等 都 
是 由 Entry 类 来 处 理 。 读 者 可 以 通过 在 地 址 栏 输入 “chrome://view-http- 
cache/”* 来 查看 这 些 项 ， 图 4-19 是 一 个 表 项 的 内 部 存储 内 容 。 


http://w. chromium. org/_/rsre/1369661866000/system/app/css/symbol font. css 


HTTP/1.1 200 OK 

Content-Type: text/css; charset=UTF-8 
K-Frame-Options: SAMEORIGIN 

Expires: Wed, 04 Jun 2014 10:28:20 GMT 
Date: Tue, 04 Jun 2013 10:28:20 GMT 
Cache-Control: public, max-age=31536000 
Content-Encoding: gzip 
X-Content-Type-Öptions: nosniff 
R-KS5-Protection: 1; mode=block 
Content-Length: 331 

Server: GSE 


00000000: 
00000010: 
00000020: 
00000030: 
00000040: 3 ss; charset=UTF- 
00000050: 8. X-Frame-Ôption 
00000060: s: SAMEORIGIN. Ex 
00000070: pires: Wed, Od J 
D00000080: un 2014 10:28:20 


图 4-19 ”一 个 磁盘 缓存 表 项 的 内 部 数据 


下 面 介绍 表 和 表 项 是 如 何 被 组 织 和 存储 在 磁盘 上 的 。 在 磁盘 上 ， 
Chromium 至 少 需要 一 个 索引 文件 和 四 个 数据 文件 。 索 引文 件 用 来 检索 
存放 在 数据 文件 中 的 众多 索引 项 ， 用 来 索引 表 项 。 数 据 文件 又 称 块 广 
件 ， 里 面包 含 很 多 特定 大 小 (例如 256 字 节 或 者 1k 字 节 ) R, AFIR 
速 检 索 ， 这 些 数据 块 的 内 容 是 表 项 ， 包 括 HITTP 文 件 头 、 请 求 数据 和 资 
源 数 据 等 ， 数 据 文件 名 形 如 “data_1”、“data_2” 等 。 


当 资 源 文件 大 小 超过 一 定 值 的 时 候 ，Chromium 会 建立 单独 的 文件 
来 保存 它们 ， 而 不 是 将 它们 放 入 上 面 的 4 个 数据 文件 中 。 这 些 单独 存储 
的 文件 中 并 没有 元 数据 信息 ， 只 是 资源 文件 内 容 ， 其 文件 名 形 如 
“f_xxxxx”， 其 中 xxxxx 是 5 个 数字 或 者 ABCDEF (十 六 进 制 ) ， 用 于 表 
示 编 号 。 


索引 文件 的 结构 定义 如 图 4-20 所 示 ， 可 以 看 到 它 包 括 一 个 索引 的 
头 部 和 索引 地 址 表 。 头 部 用 来 表示 该 索引 文件 的 信息 ， 例 如 索引 文件 
版 本 号 、 索 引 项 数量 、 文 件 大 小 等 信息 。 而 索引 地 址 表 就 是 保存 各 个 
表 项 对 应 的 索引 地 址 。 该 索引 文件 直接 将 文件 映射 到 内 存 地 址 ， 这 样 
可 以 快速 地 找到 表 项 的 索引 地 址 。 索 引 地 址 的 含义 以 下 面 两 个 例子 作 
如 下 解释 。 


struct NET EXPORT PRIVATE IndexHeader { 
ites ie 


Be m 
32 version; 
t32 num entrie // Numbe £ curr ly stored 
t32 num_byt // Total f the stored d 
nt32 Last fil // Last ext 1 file created 
t3 this_id fy La: E Ii be if jed (dirty flag). 
heAd Stats // Ste ge f dat 
t32 table len; // Actual £ tł tabl (0 == kIndexTablesize) 
t3 crash; // Signal s crasl 
t32 experiment; #4 Ia of g g test 
uin 64 create time yf & hi © of Ë 
t3 pad[52] 
LruDat Iru // Ev trol dat 


; 
struct Index { // The structure of the whole index file. 
IndexHeader header; 
CacheAddr table[kIndexTablesize]; // Default size. Actual size controlled 
by header.table_len. 
j 


214-20 ”索引 文件 的 结构 表示 


。 0x8000001C: 前 四 位 中 的 8 表示 这 个 地 址 指向 的 表 项 是 一 个 单独 
的 文件 (说 明 内 容 大 于 特定 值 ) ， 后 面 20 位 表示 文件 名 字 中 的 编 
号 ， 所 以 文件 名 为 “f_0001C”。 

e 0xA0020001: 前 四 位 中 的 A 表示 这 个 地 址 指向 的 表 项 是 存 入 数据 
文件 “data_2” 的 第 一 个 块 。 


这 些 表示 方法 不 是 固定 的 ， 以 后 也 可 能 发 生 改变 ， 但 是 基本 思想 
大 致 如 此 。 数 据 文 件 的 结构 总 体 上 也 是 类 似 的 ， 它 也 是 一 个 文件 头 加 
上 后 面 的 块 文件 。 前 面 说 过 ， 每 个 块 的 大 小 是 固定 的 ， 例 如 512 字 节 ， 
所 以 当 需 要 超过 512 字 节 的 时 候 ，Chromium 可 能 会 为 其 分 配 多 个 块 来 
解决 这 一 问题 。 但 是 ， 最 多 不 能 超过 四 个 块 (前 面 说 过 大 于 四 个 块 的 
通常 是 单独 的 文件 。 另 一 方面 ， 如 果 一 个 表 项 需要 分 配 四 个 块 ， 那 
么 通 单 跟 块 在 文件 中 的 索引 位 置 是 对 齐 的 ， 也 就 是 起 始 块 的 位 置 是 4 的 


倍数 。 


表 项 的 结构 也 分 为 两 个 部 分 ， 第 一 部 分 用 于 标记 自己 ， 包 括 各 种 
元 数据 信息 和 自身 的 内 容 ， 通 常 它 是 较 少 变动 的 ， 在 Chromium 中 用 
disk_cache::EntryStore 类 表示 ; 另 一 部 分 经 常 发 生变 动 ， 在 Chromium 
中 用 disk_cache::RankingsNode 类 表示 ， 它 的 大 小 固定 ， 主 要 为 表 项 的 
回收 算法 服务 ， 里 面 保 存 了 回收 算法 所 需要 的 信息 。EntryStore 的 结构 
体 定 义 如 图 4-21 所 示 。 图 中 有 一 些 标记 该 表 项 的 数据 ， 例 如 “hash”、 
“key” 等 。 “key” 其 实 是 资源 的 URL， 如 果 URL 过 于 长 ， 那 么 “long_key” 
就 派 上 了 用 场 ， 可 以 用 一 个 或 者 多 个 块 来 存储 。“data_addr” 可 以 存储 
多 达 四 个 地 址 ， 它 们 指向 不 同 的 位 置 ， 这 些 地 址 可 以 表示 HTTP 头 、 资 
源 内 容 等 。 


struct EntryStore { 
uint32 hash; // Full hash of the key. 
CacheAddr next; // Next entry with the same hash or bucket. 
CacheAddr rankings_node; // Rankings node for this entry. 
int32 reuse count; // How often is this entry used. 
int32 refetch_count; // How often is this fetched from the net. 
int32 state; // Current state. 
uint64 creation time; 
int32 key_len; 
CacheAddr long_key; // Optional address of a long key. 
iïint32 data_size[4]; // We can store up to 4 data streams for each 
CacheAddr data addr[4]; // entry. 
Wint32 flags; // Any combination of EntryFlags. 
int32 pad[4]; 
uint32 self hash; // The hash of EntryStore up to this point. 
char key[256 - 24 * 4]; // null terminated 
‘i 


图 4-21 ”EntryStore 的 结构 体 定义 


总 结 上 面 的 定义 和 描述 ， 可 以 描绘 出 磁盘 缓存 的 存储 结构 ， 如 图 
4-22 所 示 。 


data addr[4] 


单独 文件 : f£ 00001 


图 4-22 ”使 用 索引 文件 和 数据 文件 的 表 项 索引 方式 


Chromium 使 用 LRU 算 法 来 回收 表 项 。 因 为 磁盘 存储 的 空间 是 有 限 
的 ， 不 能 无 限 增长 下 去 ， 所 以 对 于 很 少 使 用 到 的 表 项 ， 可 以 回收 这 一 
部 分 磁盘 空间 。 


4.3.4 Cookie Lill 


Cookie 是 一 项 很 “古老 ”的 技术 ， 因 为 比较 简单 易 用 ， 所 以 一 直 受 
到 广泛 的 应 用 。Cookie 格 式 就 是 一 系列 的 “关键 字 + 值 ?对 ， 一 个 简单 的 
例子 如 下 : 


testi=webkit;test2=chromium;Expires=Sun, 30 Oct 2016 


21:35:00 GMT;Domain=.myweb.com; 


例子 中 包括 两 个 自 定义 的 关键 字 ， 分 别 是 “test1” 和 “test2”， 它 们 
的 值 分 别 为 “webkit* 和 “chromium”。 后 面 的 则 是 预定 义 的 关键 字 
“Expires” 和 “Domain”， 表 示 的 是 该 Cookie 的 失效 时 间 和 该 Cookie 对 应 
的 域 。 基 于 安全 性 考虑 ， 一 个 网 页 的 Cookie 只 能 被 该 网 页 (或 者 说 是 
该 域 的 网 页 ) 访问 。 


根据 Cookie 的 时 效 性 可 以 将 Cookie 分 成 两 种 类 型 ， 第 一 种 是 会 话 
型 Cookie (Session Cookie) ， 这 些 Cookie 只 是 保存 在 内 存 中 ， 当 浏览 
器 退出 的 时 候 即 清除 这 些 Cookie。 如 果 Cookie 没 有 设置 失效 时 间 ， 就 
是 会 话 型 Cookie。 第 二 种 是 持续 型 Cookie (Persistent Cookie) ， 也 就 
是 当 浏 览 器 退出 的 时 候 ， 仍然 保留 Cookie 的 内 容 。 该 类 型 的 Cookie 有 
一 个 有 效 期 ， 在 有 效 期 内 ， 每 次 访问 该 Cookie 所 属 域 的 时 候 ， 都 需要 
将 该 Cookie 发 送 给 服务 器 ， 这 样 服务 器 能 够 有 效 追 踪 用 户 的 行为 。 


Chromium 中 支持 Cookie 的 机 制 也 较为 简单 和 清晰 ， 如 图 4-23 所 示 
的 是 Chromium 所 设计 和 使 用 的 主要 类 及 其 关系 。 CookieMonster Œ 
Cookie 机 制 中 最 重要 的 类 ， 实 际 上 相当 于 Cookie 管 理 器 ， 它 包括 几 个 
作用 : 第 一 是 实现 CookieStore 的 接口 ， 它 是 对 外 的 接口 ， 调 用 者 可 以 


设置 和 获得 Cookie; 第 二 是 报告 各 种 Cookie 的 事件 ， 例 如 更 新 信息 
等 ， 主 要 使 用 Delegate 类 ; 第 三 是 Cookie 对 象 的 集合 ， 也 就 是 
CanonicalCookie 的 集合 ， 每 个 CanonicalCookie 对 象 表示 一 个 域 的 
Cookie 结 合 。 最 后 是 持续 型 Cookie 的 存储 ， 上 面 讲 的 数据 都 是 保存 在 
内 存 中 的 ， 当 需要 存储 到 磁盘 的 时 候 使 用 PersistentCookieStore 类 ， 具 
体 由 SQLitePersistentCookieStore 类 负责 实际 的 存储 动作 。 


CookieStore 
+SetCookieW ithOptionsAsync() 
+GetCookiesWithOptionsAsync() 


Delegate CookieMonster 
+OnCookieChanged() - ies_ 


PersistentCookieStore 
+AddCookie() 
+UpdateCookieAccess Time() 


SQLitePersistentCookieStore 


图 4-23 ”Chromium 的 Cookie 相 关 类 及 其 关系 


4.3.5 ZENE 


HTTP 是 一 种 使 用 明文 来 传输 数据 的 应 用 层 协 议 。 构 建 在 SSL 之 上 
的 HTTPS 提 供 了 安全 的 网 络 传输 机 制 ， 现 已 被 广泛 应 用 于 网 络 上 。 典 
型 的 是 电子 商务 、 银 行 支付 方面 的 应 用 。 基 本 上 所 有 的 浏览 器 都 支持 
该 协议 ，Chromium 当 然 也 不 例外 ， 这 些 会 在 第 12 章 安全 机 制 中 作 介 
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不 仅 如 此 ，Chromium 也 支持 一 种 新 的 标准 ， 这 就 是 HSTS (HTTP 
Strict Transport Security) 。 该 协议 能 够 让 网 络 服务 器 声明 它 只 支持 
HTTPS 协 议 ， 所 以 浏览 器 能 够 理解 服务 器 的 声明 ， 发 送 基于 HTTPS 的 
连接 和 请 求 。 通 常情 况 下 ,浏览 器 的 用 户 不 会 输入 “scheme 

(http://) ”， 浏 览 器 的 补 齐 功 能 通常 会 加 入 该 “scheme”， 但 是 ， 服 务 
器 可 能 需要 “https:/”。 在 这 样 的 情况 下 ， 该 协议 就 显得 非常 有 用 。 一 
般 情 况 下 ， 服 务 在 返回 的 消息 头 中 加 入 以 下 信息 表明 它 支持 该 标准 : 


Strict-Transport-Security:max- 


age=16070400; includeSubDomains 


4.3.6 ”高 性 能 网 络 栈 


Chromium 的 网 络 模块 有 两 个 重要 目标 ， 其 一 是 安全 ， 其 二 是 速 
度 。 为 此 ， 该 项 目 引 入 了 很 多 WebKit 所 没有 的 新 技术 ， 这 是 一 个 很 好 
的 学 习 对 象 。 


4.3.6.1 DNS 预 取 和 TCP 预 连接 (Preconnect) 


一 次 DNS 查询 的 平均 时 间 大 概 是 60 人 120ms 之 间或 者 更 长 ， 而 TCP 
的 三 次 握手 时 间 大 概 也 是 几 十 毫秒 或 者 更 长 。 看 似 一 个 很 短 的 时 间 ， 
但 是 相对 于 网 页 的 泻 染 来 说 ， 这 是 一 个 非常 长 的 时 间 。 如 何 有 效 地 减 
少 这 段 时 间 ，Chromium 给 出 了 自己 的 答案 一 -DNS 预 取 和 TCP 预 连 
接 ， 它 们 都 是 由 Chromium 的 “Predictor”* 机 制 来 实现 的 。 


首先 是 DNS 预 取 技 术 。 它 的 主要 思想 是 利用 现 有 的 DNS 机 制 ， 提 
前 解析 网 页 中 可 能 的 网 络 连 接 。 具 体 来 讲 ， 当 用 户 正 在 浏览 当前 网 页 
的 时 候 ，Chromium 提 取 网 页 中 的 超 链接 ， 将 域名 抽取 出 来 ， 利 用 比较 
少 的 CPU 和 网 络 带 宽 来 解析 这 些 域名 或 IP 地 址 ， 这 样 一 来 ， 用 户 根本 
感觉 不 到 这 一 过 程 。 当 用 户 单 击 这 些 链接 的 时 候 ， 可 以 节省 不 少时 
间 ， 特 别 在 域名 解析 比较 慢 的 时 候 ， 效 果 特 别 明 显 。 


DNS 预 取 技术 不 是 使 用 前 面 提 到 的 Chromium 了 网络 栈 ， 而 是 直接 利 
用 系统 的 域名 解析 机 制 ， 好 处 是 它 不 会 阻碍 当前 网 络 栈 的 工作 。DNS 
预 取 技术 针对 多 个 域名 采取 并 行 处 理 的 方式 ， 每 个 域名 的 解析 须 由 新 
开启 的 一 个 线程 来 处 理 ， 结 束 后 此 线程 即 退 出 。 


网 页 的 开发 者 可 以 显示 指定 预 取 哪些 域名 来 让 Chromium 解 析 ， 这 
非常 直截了当 ， 特 别 对 于 那些 需要 重 定向 的 域名 ,具体 做 法 如 下 所 
Jo : <link rel="dns-prefetch"href="http://this-is-a-dns-prefetch- 
example.com">。 当然 ，DNS 预 取 技术 不 仅 应 用 于 网 页 中 的 超 链接 ， 当 
用 户 在 地 址 栏 中 输入 地 址 后 ， 候 选项 同 输入 的 地 址 很 匹配 的 时 候 ， 在 
用 户 敲 下 回 车 键 获取 该 网 页 之 前 ，Chromium 已 经 开始 使 用 DNS 预 取 技 
术 解 析 该 域名 了 。 


可 以 通过 在 地 址 栏 中 输入 “chrome:/dns/” 查 看 Chromium 的 DNS 预 
取 的 域名 。 在 笔者 的 浏览 器 中 ， 用 户 可 以 看 到 表 4-1 所 示 的 预 取 结果 。 
接 下 来 是 TCP 预 连接 。 


表 4-1 Chromium 的 DNS 预 取 技术 的 实例 结果 


How long ago 
Host name Motivation 
(HH:MM:SS) 


http://blog.csdn.net/ 03:00:23 


po 


Chromium 使 用 追踪 技术 来 获取 用 户 从 什么 网 页 跳 转 到 另外 一 个 网 
页 。 可 以 利用 这 些 数据 、 一 些 启发 式 规则 和 其 他 一 些 暗示 来 预测 用 户 
下 面 会 单 击 什么 起 链接 ， 当 有 足够 的 把 握 时 ， 它 便 先 DNS 预 取 ， 更 进 
一 步 ， 还 可 以 预先 建立 TCP 连 接 。 听 起 来 够 智能 的 吧 ? 是 的 ， 但 是 这 
对 用 户 的 隐私 是 一 个 极 大 的 挑战 ， 它 甚至 能 预测 你 单 击 什么 起 链接 ! 


同 DNS 预 取 技 术 一 样 ， 追 踪 技术 不 仅 应 用 于 网 页 中 的 超 链 接 ， 当 
用 户 在 地 址 栏 中 输入 地 址 ， 如 候选 项 同 输入 的 地 址 很 匹配 ， 则 在 用 户 


敲 下 回 车 键 获 取 该 网 页 之 前 ，Chromium 就 已 经 开始 党 试 建立 TCP 连 接 
7w 


4.3.6.2 HTTP 管线 化 (Pipelining) 


我 们 知道 ， 很 多 时 候 ， 服 务 器 和 浏览 器 通信 是 按 顺序 来 的 ， 也 融 
是 说 ， 浏 览 器 发 送 一 个 请 求 给 服务 器 ， 等 到 服务 器 的 回复 后 ， 才 会 发 
送 另 外 一 个 请 求 。 这 样 做 的 蛇 端 是 效率 极 差 。 


HTTP 1.1 开 始 增 加 了 管线 化 (Pipelining) 技术 。Chromium 当 然 也 
支持 这 一 技术 ， 但 它 需 要 服务 器 的 支持 ， 两 者 配合 才能 实现 HTTP 管 线 
化 。HTTP 管 线 化 技术 是 一 项 同时 将 多 个 HTTP 请 求 一 次 性 提交 给 服务 
器 的 技术 ， 因 此 无 需 等 待 服务 器 的 回复 ， 因 为 它 可 能 将 多 个 HTTP 请 求 
填充 在 一 个 TCP 数 据 包 内 。HTTP 管 线 化 需要 在 网 络 上 传输 较 少 的 TCP 
数据 包 ， 因 此 减少 了 网 络 负载 。 图 4-24 描 述 了 HTTP 管 线 化 技术 是 如 何 
传送 请 求 和 回复 的 。 


图 4-24 ”使 用 HTTP 管 线 化 技术 的 请 求 和 回复 


请 求 结果 的 管线 化 使 得 HTML 网 页 加 载 时 间 动 态 提 升 ， 特 别 是 在 
具体 有 高 延迟 的 连接 环境 下 。 在 速度 较 快 的 网 络 连 接 环 境 下 ， 提 速 可 
能 不 是 很 明显 。 因 为 ， 这 些 请 求 还 是 有 明显 的 先后 顺序 。 管 线 化 机 制 
需要 通过 永久 连接 (Persistent Connection) 完成 ， 并 且 只 有 GET 和 
HEAD 等 请 求 可 以 进行 管线 化 ， 使 用 场景 有 很 大 的 限制 。 


4.3.0.3 SPDY 


HTTP 管 线 化 技术 有 很 大 的 限制 和 缺陷 ， 那 么 如 何 解 决 这 些 问 题 
呢 ? 在 引入 SPDY 协 议 之 前 ， 同 很 多 成 功 案例 背后 有 众多 的 失败 实验 
一 样 ， 也 尝试 了 一 些 解 决 方案 ,例如 SCTP、SST、MUX 等 ， 它 们 主要 
作用 在 传输 层 或 者 会 话 层 上 。 但 是 ， 之 前 的 技术 只 是 解决 了 部 分 问 
题 ， 而 HITP 相 关 问 题 (如 压缩 等 ) 依然 没有 解决 ， 而 且 在 传输 层 的 协 
议 很 难 实施 。 为 此 ，Chromium 引 入 了 新 的 机 制 一 一 SPDY。SPDY 就 是 
为 了 解决 网 络 延 迟 和 安全 性 问题 。 根 据 Google 的 官方 数据 ， 使 用 SPDY 
协议 的 服务 器 和 客户 端 可 以 将 网 络 加 载 的 时 间 减 少 64%， 好 消息 是 ， 
在 HTTP2.0 的 草案 中 将 引入 SPDY 协 议 ， 将 其 作为 基础 来 编写 。 


SPDY 协 议 是 一 种 新 的 会 话 层 协 议 ， 因 为 网 络 协议 是 一 种 栈 式 结 
构 ， 它 被 定义 在 HTTP 协 议和 TCP 协 议 之 间 ， 图 4-25 描 述 了 这 些 协 议 之 
间 的 层次 关系 。 


TCP 〈 传 输 层 ) 


图 4-25 SPDY 协 议 所 处 的 层次 


SPDY 协 议 的 核心 思想 是 多 路 复 用 ， 仅 使 用 一 个 连接 来 传输 一 个 
网 页 中 的 众多 资源 。 从 图 4-25 中 读者 也 可 以 看 到 ， 它 本 质 上 并 没有 改 
变 HTTP 协 议 ， 只 是 将 HTTP 协 议 头 通过 SPDY 来 封装 和 传输 。 数 据 传 
输 方式 也 没有 发 生变 化 ， 也 是 使 用 TCP/IP 协 议 。 所 以 ，SPDY 协 议 相 
对 比较 容易 部 署 ， 服 务 器 只 需要 插入 SPDY 协 议 的 解释 层 ， 从 SPDY 的 
消息 头 中 获取 各 个 资源 的 HTTP 头 即 可 。 其 次 ，SPDY 协 议 必 须 建 立 在 
SSL 层 之 上 ， 这 是 一 个 比较 大 的 限制 ， 因 为 有 很 多 网 站 不 一 定 希望 支 
持 HITPS。SPDY 的 工作 方式 有 以 下 四 个 特征 。 


。 利用 一 个 TCP 连 接 来 传输 不 限 个 数 的 资产 请 求 的 读 写 数 据 流 ， 这 
与 之 前 的 为 每 个 资源 请 求 都 建立 一 个 TCP 连 接 大 大 不 同 ， 这 明显 
提高 了 TCP 连 接 的 利用 率 ， 减少 了 TCP 连 接 的 维护 成 本 。 前 面 我 
们 也 说 过 ， 建 立 一 个 TICP 连 接 的 时 间 为 几 十 毫秒 或 者 更 长 ， 这 显 
然 能 够 减少 时 间 。 


根据 资源 请 求 的 特性 和 优先 级 ，SPDY 可 以 调整 这 些 资源 请 求 的 
优先 级 ， 例 如 JavaScript 资 源 的 优先 级 很 高 ， 服 务 器 优先 传输 回复 
该 类 型 的 请 求 。 在 网 络 带 宽 不 是 很 理想 的 情况 下 ， 这 是 一 种 折 
中 。 

只 对 这 些 请 求 使 用 压缩 技术 ， 可 大 大 减少 需要 传送 的 字 节 数 。 这 
一 思想 已 广泛 应 用 于 各 种 浏览 

当 用 户 需 要 浏览 某 个 网 页 ， 支 持 SPDY 协 议 的 服务 器 在 发 送 网 页 
内 容 时 ， 可 以 尝试 发 送 一 些 信息 给 浏览 器 ， 告 诉 后 面 可 能 需要 哪 
些 资源 ， 浏 览 器 可 以 提前 知道 并 决定 是 否 需 要 下 载 。 更 极端 的 情 
况 是 ， 服 务 器 可 以 主动 发 送 资 源 。 


在 介绍 完 SPDY 协 议 之 后 ， 让 我 们 一 起 看 看 SPDY 协 议 引 入 之 后 ， 


Chromium 的 网 络 栈 产生 了 哪些 变化 。 回 顾 图 4-14 描 述 的 调用 栈 ， 图 4- 
27 给 出 了 基于 SPDY 协 议 的 网 络 栈 的 结构 。 图 4-26 中 看 到 的 好 像 跟 4-14 
图 中 的 没有 大 的 不 同 ? 是 的 ， 大 体 上 都 是 这 种 栈 结构 。 但 是 ， 至 少 还 
是 有 三 点 不 同 。 


URLRequest 
URLRequestJob(Http) URLRequestJobFactory 


HttpNetworkTransaction 


HttpStreamFactoryImpl 一- 一 一 SpdyHttpStream 


ClientSocketFactory SSLClientSocket 


图 4-26 ”基于 SPDY 协 议 的 网 络 栈 
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图 4-27 SPDY 协 议 的 消息 格式 


in i 框 表示 可 能 个 SpdyStream 和 SpdyHttpStream 对 象 ， 也 就 
个 流 使 用 一 个 SpdySession 会 话 ， 同 时 使 用 一 个 socket 连 接 。 

Ane 的 管理 、 删 除 、 创 建 、 数 量 限 制 等 都 是 由 
SpdySession 来 处 理 。 

。 对 于 之 前 的 一 些 类 ，Spdy 有 专门 的 实现 ， 
关系 。 

。 SpdyHttpStream 类 继承 自 之 前 的 HttpStream 类 ， 所 充当 的 角色 相 机 
一 一 就 是 一 个 HttpStream 类 ， 但 是 SpdyHttpStream 类 会 对 应 一 


因为 需要 支持 新 协议 的 


SpdyStream 并 将 Spdy 协 议 部 分 等 实际 工作 交 给 SpdyStream 类 来 
做 。 


为 了 对 Spdy 协 议 有 直观 和 清晰 的 认识 ， 在 这 里 ， 笔 者 利用 
Chromium 浏览 器 提供 的 工具 chrome://net-internals/#events & 
q=type:SPDY_SESSION%20is:active 来 查看 浏览 器 在 访问 
https://www.google.com.hk 时 使 用 SPDY 协 议 的 一 些 消息 。 ant 27 显 示 了 
其 中 一 部 分 浏览 器 和 服务 器 之 间 传 输 的 消息 ， 限 于 篇 幅 ， 这 里 只 是 节 


选 。 


图 中 共有 三 个 消息 发 送 给 服务 器 。 每 个 消息 的 最 上 面 是 当前 的 时 
间 惟 和 消息 类 型 。 之 后 是 消息 体 ， 其 中 包括 SPDY 协 议定 义 的 消息 格 
式 ，SPDY 协 议 中 有 个 属性 表示 的 是 HTTP 的 消息 头 。 每 个 消息 都 对 应 

一 个 stream 的 id， 用 于 标记 不 同 的 资源 请 求 。 图 中 有 stream 的 id 为 “1 和 
“3o 


4.3.6.4 QUIC 


QUIC 是 一 种 新 的 网 络 传输 协议 ， 主 要 目标 是 改进 UDP 数据 协议 的 
能 力 。 同 SPDY 建 立 在 传输 层 之 上 不 同 ，QUIC 所 要 解决 的 问题 就 是 传 
输 层 的 传输 效率 ， 并 提供 了 数据 的 加 密 。 所 以 ，SPDY 可 以 在 QUIC 之 
ETfF. 


QUIC 已 经 被 放 入 Chromium 的 代码 中 ， 你 可 以 在 
https://chromium.googlesource.com/chromium/src/net/+/master/quic/ 看 到 
E, © 
Ko - 


4.3.7 “实践 : Chromium 网 络 工 具 和 
信息 


网 络 栈 是 复杂 的 ， 为 了 开发 者 比较 容易 查看 网 络 的 相关 信息 ， 
Chromium 浏 览 器 提供 了 强大 的 工具 帮助 理解 网 络 栈 。 


Chromium 提 供 了 用 户 友好 的 网 络 信息 工具 chrome:/net-internals , 
实际 上 ， 前 面 在 介绍 网 络 栈 工作 原理 的 时 候 ， 已 经 提 到 过 它 。 读 者 可 
在 地 址 栏 中 使 用 该 工具 尝试 打开 一 些 网 页 ， 就 可 以 看 到 各 种 各 样 的 信 
息 ， 因 为 该 工具 被 打开 后 才 开 始 工 作 。 


用 户 打 开 这 一 工具 后 可 以 看 到 Capture、Export、Import、Proxy、 
Events, Timeline, DNS., Sockets, SPDY 、 QUIC, Pipelining 、 
Cache, SPIs, Tests, HSTS. Bandwidth, Prerender==284), (RBA 
相信 读者 看 名 字 就 能 够 知道 它们 是 干什么 的 。 这 里 介绍 几 个 类 别 和 它 
们 的 用 法 ， 其 中 一 个 类 “Prerender" 暂 不 介绍 ， 等 讲 完了 完整 泻 染 过 程 


后 再 介绍 它 。 


首先 是 Events 类 别 ， 该 类 别 记录 了 所 有 网 络 栈 完成 的 工作 和 传送 
的 消息 。 这 些 消息 按照 它们 所 在 的 Chromium 中 类 的 对 象 来 区 分 。 图 4- 
28 记 录 了 笔者 的 浏览 器 当前 网 络 栈 的 内 部 信息 。 第 一 列 是 ID， 标 记 这 
些 对 象 。 第 二 列 是 对 象 的 类 ， 读 者 看 一 看 ， 就 能 够 发 现 它们 是 之 前 介 
绍 的 网 络 栈 中 的 各 种 类 。 其 中 有 些 以 JOB 结尾 的 类 ， 表 示 一 个 个 的 任 
务 ， 这 些 任务 可 能 是 连接 、 域 名 解析 等 ， 它 们 不 负责 具体 的 工作 ， 只 
Ee 到 一 层 桥接 和 封装 的 作用 ， 任 务 完成 后 就 直接 结束 了 。 当 用 户 单 击 
表 中 一 项 的 时 候 ， 当 前 页 面 会 给 出 当前 对 象 从 过 去 到 现在 发 生 的 各 个 
操作 ， 或 者 叫 事 件 。 


20 of 20 


Description 
lv] | 3660 URL_REQUEST https://clients4,google.com/chrome-sync/command/?client=Google+Chrome&iclient_id=EdtTTySghSiBnJ OOSEtHDg %3D%3D 
[C] |3661/HTTP_STREAM_JOB https://clients4.google.com/ 
口 |3 _RESOLVER_IMPL_REQUEST | clients4.g 443 


3663|CONNECT JOB 
CONNECT JOB 
RESOLVER_IMPL_REQUEST 
_RESOLVER_IMPL JOB 
_RESOLVER_IMPL_REQUEST | clients4.google. 


_RESOLVER_IMPL_REQUEST 
6 _RESOLVER_IMPL_REQUEST | clier 
3672|SOCKET 

HOST_RESOLVER_IMPL_REQUEST | clier 


3 SPDY_SESSION 
3 URL_REQUEST ‘i / 
3676|IHTTP_STREAMLJOB https://clients4.google.com/ 


https://eli mmand/?client=Google+Chrome&client_id=EdtTTySgh9iBnJ OQSEtHDg%3D%3D 


图 4-28 ”网 络 栈 的 “下 vents” 类 别 信息 


其 次 是 类 别 “Timeline”。 它 的 含义 就 是 一 个 按照 时 间 | 绘制 的 图 ， 图 
中 记录 在 各 个 时 间 点 Chromium 使 用 的 网 络 资源 ， 例 如 打开 的 套 接 字数 
目 、DNS 请 求 、 数 据 传输 量 等 ， 这 一 监测 信息 很 有 用 。 


其 他 的 类 别 基本 比较 容易 理解 ， 都 与 上 面 我 们 介绍 过 的 技术 相 
天 。 读 者 有 兴趣 的 话 ， 可 以 目 行 作 一 些 尝 试 ， 对 于 理解 本 节 介 绍 的 原 
理 非常 有 帮助 。 


4.4 实践 : 高 效 的 资源 使 用 策略 


WebKit 和 Chromium 为 了 高 效率 地 下 载 资源 ， 设 计 出 了 各 种 各 样 的 
策略 和 新 技术 ， 那 么 对 于 网 页 而 言 ， 是 否 可 以 直接 使 用 它们 而 不 需 
优化 代码 本 身 了 呢 ? 当然 不 是 ， 性 能 越 高 越 好 ， 优 化 总 是 无 止境 的 。 


4.4.1 DNS 和 TCP 连 接 


通过 上 面 的 描述 可 知 ，DNS 解 析 和 TCP 连 接 占用 大 量 的 时 间 ， 所 
以 为 了 高 效 地 加 载 网 页 ， 网 页 开发 者 可 以 从 以 下 方面 着 手 改变 以 减少 
这 一 部 分 的 时 间 。 


。 减少 链接 的 重 定向 。 有 些 网 页 中 使 用 了 大 量 的 重 定向 ， 可 能 还 会 
有 很 多 次 重 定向 ， 这 不 仅 要 求 浏览 器 建立 多 次 链接 ， 同 时 也 需要 
多 次 DNS 解析 ， 这 会 阻碍 DNS 预 取 技 术 的 应 用 ， 应 该 尽量 避免 。 
利用 DNS 预 取 机 制 。 网 页 的 开发 者 当然 知道 需要 链接 的 URL ， 为 
了 让 浏览 器 也 知道 这 些 链 接 ， 开 发 者 可 以 指定 需要 预 取 的 URL， 
前 面 我 们 已 经 给 出 了 示例 。 

搭建 支持 SPDY 协 议 的 服务 器 ， 当 然 指 的 是 那些 需要 使 用 HTTPS 
协议 的 网 站 。 

避免 错误 的 链接 请 求 。 有 些 网 页 中 包含 了 一 些 失 效 的 链接 ， 当 浏 
览 器 试图 获取 该 链接 对 应 的 资源 的 时 候 ， 就 会 占用 网 络 资源 。 


4.4.2 ”资源 的 数量 


通过 上 面 的 描述 亦 可 知 ， 我 们 也 可 以 通过 减少 网 页 中 所 需 的 资源 
数量 来 改善 网 页 的 加 载 ， 网 页 开发 者 可 以 从 以 下 方面 着 手 改 变 以 减少 
这 一 部 分 的 时 间 。 


。 在 HIML 网 页 中 内 蕉 小 型 的 资源 ， 也 就 是 当 资 源 比较 小 的 时 候 ， 
开发 者 可 以 将 它们 直接 放 在 网 页 中 ， 可 能 的 资源 如 CSS 、 
JavaScript 和 图 片 等 。 前 两 者 比较 直接 ， 对 于 图 片 而 言 ， 当 图 片 比 
较 小 的 时 候 ， 开 发 者 可 以 通过 base64 编 码 技术 将 它 变 成 字符 串 ， 
直接 放 入 网 页 中 ， 例 如 设置 一 个 元 素 背 景 的 时 候 ， 可 以 按照 下 面 


的 方式 来 操作 : 6 “background:url(data:image/gif;base64,ROIGOD 
IhFQAVAMIEAA...)”o 

。 合并 一 些 资源 ， 例 如 CSS、JavaScript 和 图 片 。 常 见 的 是 一 些 网 页 
中 大 量 使 用 的 小 图 片 ， 可 以 将 它们 合并 成 一 张大 的 图 片 以 供 使 
用 ， 因 为 我 们 知道 浏览 器 建立 TCP 连 接 需 要 比较 长 的 时 间 ， 所 以 
这 样 做 不 仅 能 减少 TCP 连 接 建 立 的 数量 ， 而 且 对 后 面 的 泻 染 也 会 
有 帮助 。 


4.4.3 ”资源 的 数据 量 


对 于 每 个 资源 而 言 ， 可 以 通过 减少 它 的 数据 量 来 提高 网 页 的 加 载 
速度 ， 开 发 者 可 以 从 以 下 方面 着 手 解决 。 


。 使 用 浏览 器 本 地 磁盘 缓存 机 制 。 因 为 我 们 知道 HTTP 协 议 支 持 资源 
的 失效 机 制 ， 可 以 通过 对 资源 设置 适当 的 失效 期 来 减少 浏览 器 对 
资源 的 重复 获取 。 

启用 资源 的 压缩 技术 。 例 如 ， 对 于 图 片 资源 而 言 ， 可 以 使 用 zip 压 
缩 技术 ， 然 后 在 HTTP 消 息 头 中 说 明 该 资源 经 过 压缩 ， 这 样 可 以 有 
效 减少 网 络 传输 的 数据 量 。 


其 实 还 有 很 多 其 他 的 技巧 帮助 提高 资源 的 加 载 效 率 ， 例 如 减少 无 
用 的 空格 、 启 用 异步 资源 加 载 等 ， 这 里 不 一 一 介绍 了 。 人 在 本 章 结 束 的 
时 候 ， 笔 者 向 大 家 推荐 一 个 非常 有 用 的 资源 加 载 性 能 分 析 工 具 一 一 
PageSpeed。 PageSpeed 是 一 个 Chromium 的 扩展 工具 ， 它 可 以 分 析 网 页 
加 载 过程 中 出 现 的 各 种 问题 ， 并 给 出 各 种 建议 帮助 开发 者 去 除 掉 这 些 


影响 性 能 的 问题 。 


(1) 就 笔者 自己 的 经 历 ， 因 为 我 经 常 上 https://www.google.com 查 资料 ， 当 笔者 在 地 址 栏 输 
入 http 的 时 候 ，Browser 进 程 就 已 经 在 尝试 建立 TCP 连 接 到 google.com 了 。 

(2) 截至 笔者 写作 的 时 候 ， 它 不 是 默认 打开 的 ， 因 为 需要 更 改 传输 层 协议 ， 所 以 后 续 应 该 
还 有 很 多 工作 要 做 。 


第 5 章 “《HTML 解释 器 和 DOM 模 型 


在 WebKit 中 ， 资 源 最 初 的 表示 就 是 字 节 流 ， 这 些 字 节 流 可 以 是 网 
络 传输 来 的 ， 也 可 以 是 本 地 文件 ， 那 么 字 节 流 在 接 下 来 需要 经 过 怎样 
的 处 理 呢 ? 处理 后 变 成 了 什么 呢 ? 本章 将 和 读者 一 起 在 研究 W3C 的 
DOM 模 型 之 后 ， 深 入 WebKit 的 核心 部 分 ， 剖 析 WwebKit 的 HTML 解释 器 
是 如 何 将 从 网 络 或 者 本 地 文件 获取 的 字 节 流转 成 内 部 表示 的 结构 
DOM 树 。 


5.1 DOM 模 型 


5.1.1 DOM 标 准 


DOM (Document Object Model) 的 全 称 是 文档 对 象 模型 ， 它 可 以 
以 一 种 独立 于 平台 和 语言 的 方式 访问 和 修改 一 个 文档 的 内 容 和 结构 。 
这 里 的 文档 可 以 是 HTML 文 档 、XML 文 档 或 者 XHTML 文 档 。DOM 以 
面向 对 象 的 方式 来 描述 文档 ， 在 HTML 文 档 中 ，Web 开 发 者 可 以 使 用 
JavaScript 语 言 来 访问 、 创 建 、 删 除 或 者 修改 DOM 结 构 ， 其 主要 目的 是 
动态 改变 HTML 文 档 的 结构 。 


DOM 定 义 的 是 一 组 与 平台 、 语 言 无 关 的 接口 ， 该 接口 允许 编程 语 
言 动态 访问 和 更 改 结构 化 文档 。 使 用 DOM 表 示 的 文档 被 描述 成 一 个 树 
形 结构 ， 使 用 DOM 的 接口 可 以 对 DOM 树 结构 进行 操作 。W3C 标 准 化 
组 织 定 义 一 系列 DOM 接 口 ， 随 着 时 间 的 推移 ， 目 前 已 经 形成 了 三 个 演 
进 的 标准 ， 包 括 DOM Level 1、DOM Level 2 和 DOM Level 3， 每 个 新 
的 “Level* 都 是 在 原 有 基础 上 增加 新 的 接口 以 加 强 功 能 ， 图 5-1 描 述 了 


DOM 规 范 的 演进 过 程 。 其 中 ， 在 2009 年 ，WebApps 工 作 组 (Web 应 用 
程序 工作 组 ) 推进 提出 了 一 个 对 DOM3 Events 规 范 的 修改 版 ， 目 前 称 
之 为 DOM4，DOM4 还 处 于 草案 阶段 ， 还 不 是 推荐 标准 (本 书 中 通常 
也 称 为 规范 ， 同 一 个 意思 ) 。 

A WebApps 工作 组 提 
DOM Level 3 出 的 新 版 本 的 
DOM3 Core DOM4 草案 


Load & Save 
Validation 


DOM Level 2 
DOM? Core 
DOM2 HTML 


DOM3 Events 
XPath 


DOM Level 1 
Core 
HTML 


1998 年 2000 年 2004 年 2012 年 


图 5-1 DOM 规 范 的 演进 过 程 


每 一 级 的 版 本 都 对 以 前 的 版 本 进行 了 补充 并 伴随 着 新 功能 的 加 
入 ， 每 个 版 本 都 对 DOM 的 不 同 部 分 进行 了 定义 ， 下 面 是 对 这 三 个 版 本 
的 简单 介绍 。 


DOM Level 1， 于 1998 年 成 为 W3C 推 荐 标准 ， 包 含 两 个 部 分 。 


。 Core: 一 组 底层 的 接口 ， 其 接口 可 以 表示 任何 结构 化 文档 ， 同 时 
也 允许 对 接口 进行 扩展 ， 例 如 对 XML 文 档 的 支持 。 

。HTML: 在 Core 定 义 的 接口 之 上 ，W3C 定 义 了 一 组 上 层 接口 ， 主 
要 是 为 了 对 HTML 文 档 进行 访问 。 它 把 HTML 中 的 内 容 定 义 为 文 
档 (Document) 、 节 点 (Node) 、 属 性 (Attribute) 、 元 素 
(Element) 、 文 本 (Text) 等 。 


DOM level 2， 于 2000 年 成 为 W3C 推 荐 标准 ， 包 含 六 个 部 分 。 


Core : 对 DOM level 1 中 Core 部 分 的 扩展 ， 其 中 著名 的 就 是 
getElementById 〈 没 用 过 的 请 举 手 ) ， 还 有 很 多 关于 名 空间 
(namespace) 的 接口 。 

Views: 描述 跟踪 一 个 文档 的 各 种 视图 (使 用 CSS 样 式 设 计 文 档 
前 后 ) 的 接口 。 

Events: 非常 重要 ， 这 个 部 分 引入 了 对 DOM 事 件 的 处 理 ， 笔 者 觉 
得 这 是 个 非常 大 的 变化 ， 主 要 有 EventTarget、Mouse 事 件 等 接 
口 。 但 是 ， 规 范 仍 然 不 支持 键盘 事件 ， 这 个 在 DOM Level 3 才 被 
加 入 进来 。 

Style(CSS): 一 种 新 接口 ， 可 以 修改 HTML 元素 的 样式 属性 。 
Traversal and range: 这 个 容易 理解 ， 就 是 遍历 树 (Nodelterator 
和 TreeWalker) 加 上 对 制定 范围 的 文档 修改 、 删 除 等 操作 。 
HTML: 扩充 DOM Level 1 的 HTML 部 分 ， 人 允许 动态 访问 和 修改 
HTML 文 档 。 


DOM level 3， 于 2004 年 成 为 W3C 组 织 的 推荐 标准 ， 包 含 五 个 部 


Core: {EDOM Level 1 和 DOM Level 2 的 基础 上 ， 该 部 分 加 入 了 
新 接口 adoptNode 和 textContente 

Load and Save: 人 允许 程序 动态 加 载 XML 文 件 并 解释 成 DOM 表 示 
的 文档 结构 。 

Validation: 人 允许 程序 验证 文档 的 有 效 性 。 

Events: 主要 加 入 了 对 键盘 的 支持 。 随 着 移动 平台 的 兴起 ， 触 屏 
技术 得 到 广泛 应 用 ， 所 以 触 控 (Touch) 事件 的 草案 应 该 很 快 就 会 
进入 标准 。 


e XPath: 使 用 XPath1.0 来 访问 DOM 树 ，XPath 是 一 种 简单 直观 的 
检索 DOM 树 节点 的 方式 ， 具 体 见 WwW3C XPath 规范 。 


DOM 规 范 对 于 文档 具体 的 表示 方法 没有 任何 限制 ， 只 是 定义 了 应 
用 程序 编程 接口 ， 因 此 它 在 现实 中 可 能 有 很 多 种 实现 。DOM 树 状 表示 
是 其 中 比较 普遍 的 方式 ， 也 可 以 是 二 进 制 表 示 (如 binary xml) , AR 
示 有 很 多 的 优点 ， 有 兴趣 的 读者 可 以 自行 查阅 相关 资料 。 


W3C 组 织 在 发 布 这 些 标准 的 同时 也 发 布 了 兼容 性 测试 用 例 ， 浏 览 
器 可 以 使 用 这 些 用 例 来 检查 对 标准 的 支持 程度 。 不 同 的 浏览 器 对 DOM 
这 些 标准 的 支持 也 不 尽 相 同 。Chromium 浏 览 器 对 DOM Level 1 和 DOM 
Level 2 的 支持 程度 非常 好 ， 但 它 只 是 部 分 支持 DOM Level 3 的 标准 。 


5.1.2 DOM 树 
5.1.2.1 ”结构 模型 


DOM 结 构 构 成 的 基本 要 素 是 “节点 ”， 而 文档 的 DOM 结 构 就 是 由 
层次 化 的 节点 组 成 。 在 DOM 模 型 中 ， 节 点 的 概念 很 宽泛 ， 整 个 文档 
(Document) 就 是 一 个 节点 ， 称 为 文档 节点 。HTML 中 的 标记 (Tag) 
也 是 一 种 节点 ， 称 为 元 素 (Element) 节点 。 还 有 一 些 其 他 类 型 的 节 
点 ， 例 如 属性 节点 (标记 的 属性 ) 、Entity 节 点 、ProcessingIntruction 

节点 、CDataSection 节 点 、 注 释 (Comment) 节点 等 。 


图 5-2 显 示 的 是 “文档 ”节点 提供 的 接口 ， 使 用 IDL 语 言 来 描述 。 
IDL 是 一 种 跟 语 言 无 关 的 接口 描述 语言 。 从 这 个 定义 中 可 以 看 出 ， 文 
档 继 承 目 节 操 类 型 ， 所 以 可 以 使 用 Node 的 接口 。 “文档 ”节点 表示 的 是 


整个 文档 ， 所 以 Web 开 发 者 可 以 从 中 创建 很 多 其 他 类 型 的 节点 ， 这 些 
TRAE TIAA. 


interface Document : Node { 
readonly attribute DocumentType doctype; 
readonly attribute DOMImplementation implementation; 
readonly attribute Element documentElement; 
Element createElement (in DOMString tagName) raises (DOMException) ; 


DocumentFragment createDo 
String data); 


data) 


r String data) raises (DOMException) ; 
c gIr ruction(in DOMString target, 
in DOMString data) raises (DOMException) ; 


Attr createAttribute(in DOMString name) raises (DOMException) ; 
EntityReference createEntityReference(in DOMString name) raises (DOMException); 
NodeList getElementsByTagName (in DOMString tagname) ; 


hi 


图 5-2 DOM 中 Document 的 IDL 接 口 定义 


由 于 DOM 的 定义 是 与 语言 无 关 的 ， 所 以 标准 中 所 有 这 些 都 是 接 
口 。 同 时 ， 因 为 支持 不 同类 型 的 语言 ,例如 C++、Java 或 者 
JavaScript， 所 以 它 没 有 对 内 存 的 管理 机 制 做 任何 方面 的 规定 。 同 时 这 
些 不 同 语言 的 不 同 实现 只 需要 符合 标准 定义 的 接口 即 可 ， 而 实现 者 通 
常 可 以 把 这 些 实现 的 细节 隐藏 起 来 。 


因为 我 们 重点 关注 的 是 HTML 文 档 ， 所 以 图 5-3 描 述 了 HTML 文 档 
的 接口 定义 。 它 继承 自 “ 文 档 ” 接 口 ， 同 时 又 有 些 自己 的 扩展 ， 包 括 新 
的 属性 和 接口 ， 这 些 都 跟 HTML 文 档 的 具体 应 用 相关 。 


interface HTMLDocument : Document { 


attribute DOMString tities 
readonly attribute DOMString referrer; 
readonly attribute DOMString domain; 
readonly attribute DOMString URL; 


attribute HTMLElement body; 
ute §=HTMLCollection images; 
te HTIMLCollection applets; 
te HTMLColl ion links; 
ibute HTMLCollection forms; 
ribute HTMLCollection anchors; 


attribute DOMString cookie; 
void open (); 
void close (); 
void write(in DOMString text); 
void writeln(in DOMString text); 
Element getElementBylId(in DOMString elementId); 
NodeList getElementsByName (in DOMString elementName) ; 


js 


图 5-3 HTMLDocumenthJIDLEÆE X 
5.1.2.2 DOM 树 


根据 前 面 的 描述 ， 待 DOM 的 节点 和 各 种 子 节点 被 逐次 定义 后 ， 接 
下 来 的 问题 是 如 何 将 这 些 节点 组 织 起 来 表示 一 个 文档 。 


众多 的 节点 按照 层次 组 织 构成 一 个 DOM 树 形 结构 ， 图 5-4 的 左边 
一 个 HTML 网 页 的 源 代码 ， 而 右边 就 是 它 的 DOM 树 表示 。 读 者 可 以 
看 到 ，DOM 树 的 根 就 是 HTMLDocument，HTML 了 网 页 中 的 标签 则 被 转 
换 成 一 个 个 的 元 素 节点 。 同 数据 结构 中 的 树 形 结构 一 样 ， 这 些 节点 之 
间 也 存在 父子 或 兄弟 关系 ， 例 如 “HTML” 节 点 的 子女 节点 有 两 个 一 一 
“Head” 和 “Body”， ne ona “HTML” PA 
下 面 的 四 个 节点 都 称 为 它 的 后 代 节 点 ， 而 “Div” 节 点 的 祖先 节点 则 是 
“Body”、“HTML” 等 。 


HTMLDocument 


<body> HTML 

<p> 

<div></div> So 了 
</body> Body 


</html> 
Head So M 
P 


图 5-4 HTML 网 页 和 它 的 DOM 树 表示 


Div 


上 面 的 DOM 树 中 仅仅 给 出 了 元 素 节点 和 文档 节点 ， 实 际 上 ， 在 规 
范 的 内 部 表示 中 还 包括 属性 节点 等 ， 它 们 不 属于 元 素 节点 ， 这 里 没有 
在 图 中 绘制 出 来 ， 后 面 我 们 重点 关注 的 是 元 素 节 点 和 文档 节点 。 


52 HTML 解释 器 
5.2.1 解释 过 程 


HTML 人 解释 器 的 工作 就 是 将 网 络 或 者 本 地 磁盘 获取 的 HTML 网 页 
和 资源 从 字 节 流 解释 成 DOM 树 结构 。 这 一 过 程 大 致 可 以 理解 成 图 5-5 
所 述 的 步 又， 本 节 主 要 描述 WebKit 的 解释 器 如 何 处 理 这 一 过 程 的 工 
作 。 


iit (Bytes) 学 符 流 (Characters) 


mji (Tokens) 


图 5-5 ”从 资源 的 字 节 流 到 DOM 树 


图 5-5 描 述 的 主要 是 在 这 一 过 程 中 ，WebKit 内 部 对 网 页 内 容 在 各 个 
阶段 的 结构 表示 。WebKit 中 这 一 过 程 在 图 中 被 描述 得 很 清晰 : 首先 是 
字 节 流 ， 经 过 解码 之 后 是 字符 流 ， 然 后 通过 词法 分 析 器 会 被 解释 成 词 
语 (Tokens) ， 之 后 经 过 语法 分 析 器 构建 成 节点 ， 最 后 这 些 节点 被 组 
建成 一 棵 DOM 树 。 


WebKit 为 完成 这 一 过 程 ， 引 入 了 比较 复杂 的 基础 设施 类 。 图 5-6 描 
述 了 WebKit 在 构建 DOM 树 时 需要 使 用 到 的 主要 类 ， 看 起 来 不 太 容 易 理 
解 ， 笔 者 需要 解释 一 下 。 


读者 应 该 会 发 现 ， 图 中 左边 部 分 就 是 我 们 在 第 2 章 介绍 的 网 页 框 结 
构 ， 框 对 应 于 “Frame” 类 ， 而 文档 对 应 于 “HTMLDocument* 类 ， 所 以 框 
内 包含 文档 。 gs 也 是 遵 DG 
准 的 ， 因 为 Document 有 两 个 子 类 ， 另 外 一 个 是 XMLDocument。 这 里 
没有 摘 述 内 名 的 复杂 框 结构 ， 但 是 足以 说 明 网 页 基本 结构 的 内 部 表 
示 。 人 在 实际 应 用 中 ， 网 页 内 内 框 也 会 重复 这 样 的 动作 。 


FrameLoader DocumentLoader CachedRawResource 


-m_documentLoader <> -m_mainSource > +append Data() 


网 页 的 框 结构 的 内 


eR WebKit 为 建立 网 页 的 框 结构 所 建立 的 基础 设施 类 
部 在 不 


1 

I 

1 -m_writer 
oes i mm a Ge I La a Pa ia +dataReceived() 

1 

1 

1 

i DocumentWriter 

create _— 

O EE E E E -m_decoder XSSAuditor 

| Parar +filterStartToken() 

1 

1 

i oa 

I HTMLTokenizer 

1 HTMLDocumentParser +nextToken() 

1 -m_tokenizer D 

| -m_treeBuilder 

1 -m_preloadScanner i 

1 -m_xssAuditor <> HTMLTree Builder 

| -m_tree 

HTMLDocument 4 ime [HTMLConstructionSite | licences 

a ee ee eT +insertHTMLElement() 

1 一 人 > 

1 

1 

1 

I 

1 

1 

1 
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图 5-6 ”WebKit 构 建 DOM 所 使 用 的 主要 基础 设施 类 


右边 部 分 是 WebKit 为 建立 网 页 的 框 结构 所 建立 的 设施 。 先 看 
FrameLoader 类 ， 它 是 框 中 内 容 的 加 载 器 ， 类 似 于 资源 和 资源 的 加 载 
器 。 因 为 Fr ame 对 象 中 包含 Document 对 象 ， 所 以 WebKit 同 样 需 
DocumentLoader 类 帮助 加 载 HTML 文 档 并 从 字 节 流 到 构建 的 DOM 树 。 
DocumentWriter 类 是 一 个 辅助 类 ， 它 会 创建 DOM 树 的 根 节 点 
HTMLDocument 对 象 ， 同 时 该 类 包括 两 个 成 员 变 量 ， 一 个 是 用 于 文档 
的 字符 解码 的 类 ， 另 外 一 个 就 是 HTML 解 释 嚣 HTMLDocumentParser 
ZR 

HTMLDocumentParser 类 是 一 个 管理 类 ， 包 括 了 用 于 各 种 工作 的 其 
他 类 ， 例 如 字符 串 到 词语 需要 用 到 词法 分 析 器 HIMLTIokenizer 类 。 该 
管理 类 读 入 字符 串 ， 输 出 一 个 个 词语 。 这 些 词语 经 过 XSSAuditor 做 完 
安全 检查 之 后 ， 就 会 输出 到 HTMLTreeBuilder 类 。 


HTMLTreeBuilder 类 负责 DOM 树 的 建立 ， 它 本 身 能 够 通过 词语 创 
建 一 个 个 的 节点 对 象 。 然 后 ， 借 由 HTMLConstructionSite 类 来 将 这 些 
节点 对 象 构建 成 一 棵 DOM 树 。 


介绍 完 这 些 主要 类 之 后 ， 那 么 WebKit 是 如 何 利用 它们 来 完成 工作 
sue? 当 WebKit 收 到 网 络 回复 的 字 节 流 的 时 候 ， 这 些 类 使 用 哪些 操作 
来 构建 DOM 树 呢 ? 图 5-7 是 从 字 节 流 到 构建 DOM 树 的 时 序 图， 里 面 详 
述 了 调用 过 程 。 当 然 ， 图 中 省 略 了 一 些 次 要 调用 。 


Resource CachedRaw | | WebFramel Document | | Document | | HTMLDoc HTMLDocu HTMLToken | | HTMLTre XSSAuditor HTMLElem 
Loader Resource mpl Load Writer ument mentParser izer eBuilder entFactory 
T T T T T T T 
nh 1.1: dataReceived | | | | | 
1ilappendData p | i | | 

1.1.1: commitDocum i ta | 1 | 
| | | l 
| 1.1.1.1 comfitData | | | 
| | | | | 
141.1.1.1: addData | | l 
1 | | | | | | 
| I I -1.1.1.1: creafe | | | 
1 | | | | | | 
1 | | | l 
| | | | 
| | i N 1.1.1.1.1.2: ppend | | 
| | | | | > | | 
| | | 1.1.1.1.1.2.1: pumpToketizer | 
| | 1 | 
| | 1 + + + + 
| | | | sd Loop 川 | 1.1.1.1.1.2.2: nextToken 1 
| | | | — >) | 
| | 1 | 
| | | | 1.1.1.1.1.2.3: fiterThken | 
| | | | | | T T alll | 
| | | | | I) 1.1.1.1.1.2.4:lconstructTree | 
1 | | | | l 
| | | | 1.1.1.2.4.1: createHTML Element 
| | | | 
| | l | | | 
| | | 1.1.1.1.1412.4.2: appendChild | 
| | | | | 
1.2 11.1.2 | Ed a aba 浊 t i 
IK ieee I< et | Lil I<----4I< ieee | Li <- i I | 
1 0 0 1 1 


| | 
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图 5-7 ”从 网 页 的 字 节 流 到 DOM 树 的 一 般 构 建 过 程 


第 4 章 介 绍 的 人 和 CachedRawResource 类 在 收 到 网 
络 栈 的 数据 后 ， 调 用 DocumentLoader 类 的 “commitData" 方 法 ， 然 后 
DocumentWriter 类 会 先 创建 一 个 根 节点 HTMLDocument 对 象 ， 然 后 将 
数据 “append” 输 送 到 HTMILDocumentParser 对 象 。 后 面 就 是 如 之 前 所 描 
述 的 将 其 解释 成 词语 ， 创 建 节点 对 象 然后 建立 以 HTMLDocument 为 根 
的 DOM 树 。 


对 于 循环 框 中 每 个 部 分 的 细节 ， 笔 者 将 在 接 下 来 的 4 个 小 节 里 分 别 
做 详细 介绍 。 


5.2.2 ”词法 分 析 


在 进行 词法 分 析 之 前 ， 解 释 器 首先 要 做 的 事情 就 是 检查 该 网 页 内 
容 使 用 的 编码 格式 ， 以 便 后 面 使 用 合适 的 解码 器 。 如 果 解 释 器 在 
HTML 网 页 中 找到 了 设置 的 编码 格式 ，WebKit 会 使 用 相应 的 解码 器 来 
将 字 节 流转 换 成 特定 格式 的 字符 串 。 如 果 没 有 特殊 的 格式 ， 词 法 分 析 
器 HTMLTokenizer 类 可 以 直接 进行 词法 分 析 。 


词法 分 析 的 工作 都 是 由 HTMLTokenizer 类 来 完成 ， 简 单 来 说 ， 它 
就 是 一 个 状态 机 一 一 输入 的 是 字符 串 ， 输 出 的 是 一 个 个 的 词语 。 因 为 
字 节 流 可 能 是 分 段 的 ， 所 以 输入 的 字符 串 可 能 也 是 分 段 的 ， 但 是 这 对 
词法 分 析 器 来 说 没有 什么 特别 之 处 ， 它 会 自己 维护 内 部 的 状态 信息 。 


词法 分 析 器 的 主要 接口 是 “nextToken” 水 数 ， 调 用 者 只 需要 将 字符 
串 传 入 ， 然 后 就 会 得 到 一 个 词语 ， 并 对 传 入 的 字符 串 设 置 相应 的 信 
息 ， 表 示 当 前 处 理 完 的 位 置 ， 如 此 循环 。 如 果 词 法 分 析 器 遇 到 错误 ， 
则 报告 状态 错误 码 ， 主 要 人 逻辑 在 图 5-8 中 给 予 了 搁 述 。 


检查 当前 状态 


处 理 
Comment 


状态 


处 理 处 理 


TagName 状态 TagOpen 状态 


输出 单词 和 修改 输入 的 字符 串 


5-8 ”词法 分 析 器 HTMLTokenizer 的 主要 工作 流程 


对 于 “nextToken” 闵 数 的 调用 者 而 言 ， 它 首先 设置 输入 需要 解释 的 
字符 串 ， 然 后 循环 调用 NextToken 函 数 ， 直 到 处 理 结 束 。“nextToken” 方 
法 每 次 输出 一 个 词语 ， 同 时 会 标记 输入 的 字符 串 ， 表 明 哪 些 字符 已 经 
被 处 理 过 了 。 因 此 ， 每 次 词法 分 析 器 都 会 根据 上 次 设置 的 内 部 状态 和 
上 次 处 理 之 后 的 字符 串 来 生成 一 个 新 的 词语 。“nextToken” 函 数 内 部 使 
用 了 超过 70 种 状态 ， 图 中 只 显示 了 3 种 状态 。 对 于 每 个 不 同 的 状态 ， 都 
有 相应 的 处 理 逻 辑 ， 有 兴趣 的 读者 可 以 查看 
“WebCore/html/parser/HTMLTokenizer.cpp” X {F} 4 X F “nextToken” HŽ 
的 实现 细节 。 


而 对 于 词语 的 类 别 ，WebKit 只 定义 了 很 少 ，HTMLToken 类 定义 了 
6 种 词语 类 别 ， 包 括 DOCTYPE 、StartTag 、EndTag 、 Comment, 
Character 和 EndOfFile。 这 里 不 涉及 HTML 的 标签 类 型 等 信息 ， 那 是 后 
面 语法 分 析 的 工作 。 


5.2.3 XSSAuditor 验 证 词语 


当 词 语 生 成 之 后 ，WebKit 需 要 使 用 XSSAuditor 来 验证 词语 流 

(Token Stream) 。XSS 指 的 是 Cross Site Security， 主 要 是 针对 安全 方 

面 的 考虑 。 这 部 分 的 机 制 我 们 将 放 在 高 级 篇 的 第 12 章 来 介绍 ， 只 是 因 
为 它 的 工作 在 这 一 过 程 发生 ， 所 以 这 里 稍微 提 及 一 下 。 


根据 XSS 的 安全 机 制 ， 对 于 解析 出 来 的 这 些 词 语 ， 可 能 会 阻碍 某 
些 内 容 的 进一步 执行 ， 所 以 XSSAuditor 类 主要 负责 过 滤 这 些 被 阻止 的 
内 容 ， 只 有 通过 的 词语 才 会 作 后 面 的 处 理 。 详 细 的 规则 和 方法 请 见 高 
级 篇 中 的 第 12 章 。 


5.2.4 词语 到 节点 


经 过 词法 分 析 器 解释 之 后 的 词语 随 之 被 XSSAuditor 过 滤 并 且 在 没 
有 被 阻止 之 后 ， 将 被 WebKit 用 来 构建 DOM 节 点 。 下 面 的 任务 就 是 如 何 
完成 从 词语 到 构建 节点 这 一 步骤 。 这 一 步骤 是 由 HTMLDocumentParser 
类 调用 HTMLTreeBuilder 类 的 “constructTree” 疯 数 来 实现 的 。 该 水 数 实 
际 上 是 利用 图 5-9 中 的 “processToken”* 遂 数 来 处 理 6 种 词语 类 型 。 


void HTMLTreeBuilder: :processToken (AtomicHTMLToken* token) 
{ 

switch (token->type()) { 

case HTMLToken: :Uninitialized: 

ASSERT_NOT_REACHED () ; 

reak; 
case HTMLToken: :DOCTYPE: 
m_shouldSkipLeadingNewline = false; 
processDoct ypeToken (token); 
break; 
case HTMLToken: :StartTag: 
m_shouldSkipLeadingNewline = false; 


rocessStartTag (token) ; 


reak; 

case HTMLToken: :EndTag: 
m_shouldSkipLeadingNewline = false; 
»rocessEndTag (token) ; 

reak; 

case HTMLToken: :Comment: 
m_shouldSkipLeadingNewline = false; 
rocessComment (token) ; 

return; 

case HTMLToken: :Character: 
processCharacter (token) ; 


break; 


case HTMLToken: :EndOfFile: 
m_shouldSkipLeadingNewline = false; 
rocessEndOfFile (token); 


reak; 


图 5-9 HTMLTreeBuilder 处 理 词语 


5.25 ”节点 到 DOM 树 


从 节点 到 构建 DOM 树 ， 包 括 为 树 中 的 元 素 节点 创建 属性 节点 等 工 
作 由 HTMLConstructionSite 类 来 完成 。 正 如 前 面 介 绍 的 ， 该 类 包含 一 
个 DOM 树 的 根 节点 一 一 HTMLDocument 对 象 ， 其 他 的 元 素 节点 都 是 它 
的 后 代 。 


因为 HTML 文 档 的 Tag 标 签 是 有 开始 和 结束 标记 的 ， 所 以 构建 这 一 
过 程 可 以 使 用 栈 结构 来 帮忙 。HTMLConstructionSite 类 中 包含 一 个 


“HTMLElementStack” 变 量 ， 它 是 一 个 保存 元 素 节 点 的 栈 ， 其 中 的 元 素 
节点 是 当前 有 开始 标记 但 是 还 没有 结束 标记 的 元 素 节 点 。 想 象 一 下 
HTML 文 档 的 特点 ， 例 如 一 个 片段 “<body><div><img></img></div> 
</body>”， 当 解释 到 img 元 素 的 开始 标记 时 ， 栈 中 的 元 素 就 是 body、 
div 和 img， 当 遇 到 img 的 结束 标记 时 ，img 退 栈 ，img 是 div 元 素 的 子 
女 ; 当 遇 到 div 的 结束 标记 时 ，div 退 栈 ， 表 明 div 和 它 的 子女 都 已 处 理 
完 ， 以 此 类 推 。 


根据 DOM 标 准 中 的 定义 ， 节 点 有 很 多 类 型 ， 例 如 元 素 节点 、 属 性 
节点 等 。 那 么 ，WebKit 中 用 来 表示 DOM 结 构 的 相关 类 是 什么 呢 ? 


同 DOM 标 准 一 样 ， 一 切 的 基础 都 是 Node 类 。 在 WebKit 中 ，DOM 
中 的 接口 Interface 对 应 于 C++ 的 类 ，Node 类 是 其 他 类 的 基 类 ， 图 5-10 显 
示 了 DOM 的 主要 相关 节点 类 。 图 中 的 Node 类 实际 上 继承 自 EventTarget 
类 ， 它 表明 Node 类 能 够 接受 事件 ， 这 个 会 在 DOM 事 件 处 理 中 介绍 。 
Node 类 还 继承 自 另 外 一 个 基 类 
引擎 相关 。 


ScriptWrappable， 这 个 跟 JavaScript 


EventTarget ScriptWrappable 


StyledElement 
i j 


人 
HTMLElement 


Node 的 子 类 就 是 DOM 中 定义 的 同名 接口 ， 元 素 类 、 文 档 类 和 属性 
类 均 继承 自 一 个 抽象 出 来 的 ContainerNode 类 ， 表 明 它 们 能 够 包含 其 他 
的 节点 对 象 。 回 到 HITML 文档 来 说 ， 元 素 和 文档 对 应 的 类 就 是 
HTMLElement 类 和 HTMLDocument 类 。 实 际 上 HTML 规 范 还 包含 众多 
的 HTMLElement 子 类 ， 用 于 表示 HTML 语 法 中 众多 的 标签 。 这 些 类 比 
较 容 易 理 解 ， 这 里 就 不 做 介绍 了 。 


5.2.6 ”网 页 基础 设施 


上 面 介 绍 了 Frame、Document 等 WebKit 中 的 基础 类 ， 这 些 都 是 网 
页 内 部 的 概念 ， 实 际 上 ，WebKit 提 供 了 更 高 层次 的 设施 ， 用 于 表示 整 
个 网 页 的 一 些 类 ，WebKit 中 的 接口 部 分 就 是 基于 它们 来 提供 的 。 表 示 
网 页 的 类 既 提供 了 构建 DOM 树 等 这 些 操作 ， 同 时 也 提供 了 接口 用 于 之 


图 5-10” WebKit 的 节点 类 


绍 的 布局 、 泻 染 等 操作 。 请 读者 记 住 框 和 文档 等 类 ， 在 后 面 
们 也 经 常会 被 使 用 到 。 


Ol >> 


图 5-11 搞 述 了 WebKit 中 用 于 表示 网 页 的 一 些 基础 设施 类 ， 同 样 以 
WebKit 的 Chromium 移 植 为 例 ， 来 描述 WebKit 是 如 何 被 该 移植 使 用 从 而 
提供 对 外 使 用 的 接口 ， 它 们 实际 上 是 Chromium 项 目 调 用 WebKit 项 目的 
接口 。 


ChromeClientimpl 


WebViewlmp! 
-m_page 
-m_chromeClientimpl -m_pageGients 
-m_inspectorClientimpl -m_chrome 

7 -m_mainFrame 


ChromeClient 


RenderViewlmpl 


-webwidget_ 


<<use>> 1 


WebFrameingl 
i TE 


Chromium 移植 部 分 


图 5-11 WebCore 的 主要 网 页 类 和 Chromium 对 外 类 


中 右边 是 WebKit 中 的 WebCore 提 供 的 部 分 类 ， 这 些 类 都 是 公共 


的 ， 也 就 是 被 不 同 的 webKit 移 植 所 共享 。Chrome、ChromeClient 和 
Page 类 ， 笔 者 稍 后 介绍 ，Frame 类 之 前 已 经 介绍 过 。 


中 左边 是 WebKit 的 Chromium 移 植 实现 使 用 的 接口 类 ， 其 中 
RenderViewImpl 来 目 Chromium 项 目 ， 是 Chromium 使 用 WebKit 的 主要 
桥接 类 ， 用 于 Renderer 进 程 。 在 WebKit 的 Chromium 移 植 中 ，WebView 


和 WebFrame 是 不 得 不 提 的 两 个 类 ， 它 们 是 Chromium 项 目 用 于 表示 网 
页 和 网 页 框 的 接口 类 。 图 中 另外 两 个 类 WebViewImpl 和 WebFrameImpl 
是 这 两 个 类 的 子 类 ， 它 们 负责 使 用 Page、Frame 等 WebCore 中 的 类 来 支 
持 两 个 对 外 类 的 接口 。 


WebView 类 和 Page 类 是 一 一 对 应 的 ，Page 是 WebKit 内 部 用 来 表示 
网 页 的 类 ，WebView 是 WebKit 对 外 表示 网 页 的 类 。Page 类 对 于 WebKit 
的 所 有 移植 都 是 一 个 实现 ， 而 这 里 的 WebView 类 是 WebKit 的 Chromium 
移植 定义 的 接口 类 。 其 实 ， 在 其 他 不 同 的 移植 中 ，WebView 类 可 能 
不 同 的 实现 和 一 些 差异 。 一 个 公共 的 内 部 表示 和 一 个 外 部 接口 的 组 
合 ， 图 中 类 似 的 组 合 类 例如 WebFrame 和 Frame 类 。 


中 右上 角 是 Chrome 和 ChromeClient 类 ， 这 两 个 类 非常 重要 ,， 它 
们 使 用 一 个 WebKit 普 遍 使 用 的 设计 模式 。 此 Chrome 非 彼 Chrome， 这 里 
的 Chrome 是 WebKit 的 一 个 类 ， 表 示 的 是 网 页 所 绘制 的 与 实现 相关 的 一 
个 窗口 ， 而 不 是 Google 的 浏览 器 产品 Chrome。Chrome 类 必须 满足 下 面 
两 种 需求 。 


。 Chrome 类 需要 具备 获取 各 个 平台 资源 的 能 力 ， 例 如 WebKit 可 以 调 
用 Chrome 类 来 创建 一 个 新 窗口 。 

。 Chrome 类 需要 把 WebKit 的 状态 和 进度 等 信息 派发 给 外 部 的 调用 者 
或 者 说 是 WebKit 的 使 用 者 。 


WebKit 内 部 同 这 两 类 需求 相关 的 要 求 都 是 通过 Chrome 类 的 接口 来 
完成 的 ， 这 时 候 有 个 问题 ， 那 就 是 如 何 让 WebKit 和 外 部 调用 者 既 不 紧 
a, XED HSA AWE? WebKit 使 用 ChromeClient 抽 
象 类 来 解决 这 些 问题 。Chrome 类 是 一 些 公 共 的 操作 流程 ， 而 
ChromeClient 类 是 Chrome 类 需要 用 到 的 一 些 接口 ， 这 些 接 口 在 不 同 的 


移植 上 必须 有 不 同 的 实现 ， 所 以 从 图 中 读者 可 以 看 到 ，WebKit 的 
Chromium 移 植 中 有 ChromeClientImpl 实 现 类 。ChromeClient 类 可 以 有 
两 类 接口 ， 第 一 类 用 来 监听 WebKit 的 内 部 状态 信息 ， 这 其 实 是 回调 函 
数 ， 第 二 类 用 来 实现 Chrome 类 所 需要 的 跟 移植 相关 的 工作 。 图 5-12 中 
的 两 个 方法 分 别 对 应 第 一 类 和 第 二 类 ， 这 是 一 个 典型 的 设计 模式 。 


ChromeClient 


+contentsSizeChanged() 
+createWindow() 


+m_client 


+contentsSizeChanged() 
+createWindow() 


m_client->createWindow() > 


5-12 ” Chrome 和 ChromeClient 类 及 它们 的 方法 


举 个 例子 来 说 明 ChromeClient 类 的 用 法 。 当 Chrome 类 接收 到 网 页 
的 大 小 发 生 改 变 的 消息 时 ， 它 就 会 调用 ChromeClient 类 的 
contentsSizeChanged K 2X 5K 38 Al Chromium il G28. M Chrome % 
创建 一 个 窗口 的 时 候 ，WebKit 同 样 使 用 ChromeClient 类 来 帮助 创建 ， 
因为 Chrome 类 本 身 没 有 能 力 创建 与 移植 相关 的 这 些 信息 。 


最 后 接 上 面 介绍 的 Chrome 类 ， 它 是 一 个 非常 重要 的 类 ， 是 WebKit 
与 它 的 使 用 者 之 间 的 桥梁 ， 主 要 负责 用 户 界面 和 泻 染 相 关 的 需求 ， 实 
现 这 些 需求 会 用 到 平台 的 相关 接口 ， 以 下 是 它 的 一 些 主要 功能 。 


。 跟 用 户 界 面 和 泻 染 显示 相关 的 需要 各 个 移植 实现 的 接口 集合 类 。 

。 继承 自 HostWindow (宿主 窗口 ) 类 ， 该 类 包含 一 系列 接口 ， 用 来 
通知 重 绘 或 者 更 新 整个 窗口 、 滚 动 窗口 等 。 

。 窗口 相关 操作 ， 例 如 显示 、 隐 藏 窗口 等 。 


。 显示 和 隐藏 窗口 中 的 工具 栏 、 状 态 栏 、 滚 动 条 等 。 
。 显示 JavaScript 相 关 的 窗口 ， 例 如 JavaScript 的 alert、confirm 、 
prompt 窗 口 等 。 


5.2.7 ”线程 化 的 解释 器 


还 记得 之 前 笔者 在 分 析 Chromium 的 多 进程 和 多 线程 模型 的 时 候 提 
到 过 ， 在 Renderer 进 程 中 有 一 个 线程 ， 该 线程 用 来 处 理 HTML 文 档 的 解 
释 任 务 。 正 如 前 面 所 说 ， 在 HIML 解释 器 的 步骤 中 ，WebKit 的 
Chromium 移 植 跟 其 他 的 WebKit 移 植 也 存在 不 同 之 处 。 


顾名思义 ， 线 程 化 的 解释 器 就 是 利用 单独 的 线程 来 解释 HTML 文 
档 。 因 为 在 WebKit 中 ， 网 络 资源 的 字 节 流 自 IO 线 程 传递 给 泻 染 线程 之 
后 ， 后 面 的 解释 、 布 局 和 泻 染 等 工作 基本 上 都 是 工作 在 该 线程 ， 也 就 
是 泻 染 线 程 完成 的 (当然 这 不 是 绝对 的 ， 后 面 再 详细 介绍 ) 。 因 为 
DOM 树 只 能 在 泻 染 线程 上 创建 和 访问 ， 这 也 就 是 说 构建 DOM 树 的 过 
程 只 能 在 泻 染 线程 中 进行 。 但 是 ， 从 字符 串 到 词语 这 个 阶段 可 以 交 给 
单独 的 线程 来 做 ，Chromium 浏 览 器 使 用 的 就 是 这 个 思想 ， 下 面 来 看 看 
具体 的 实现 过 程 。 


当 字 符 串 传送 到 HTMLDocumentParser 类 的 时 候 ， 该 类 不 是 自己 处 
理 ， 而 是 创建 一 个 新 的 对 象 BackgroundHTMLParser 来 负责 处 理 ， 然 后 
将 这 些 数据 交 给 该 对 象 。WebKit 会 检查 是 否 需要 创建 用 于 解释 字符 串 
的 线程 HTMLParserThread。 如 果 该 线程 已 存在 ，WebKit 就 将 刚刚 的 任 
务 传递 给 这 一 新 线程 ， 图 5-13 描 述 了 这 一 过 程 。 


HTMLDocumentParser::append() HTMLDocumentParser::startBackgroundParser() 


创建 BackgroundHTMLParser::Configuration 创建 BackgroundHTMLParser 


如 果 需 要 ， 创 建 HTMLParserThread HTMLParserThread::postTask() 


图 5-13 ”线程 化 解释 器 的 初始 化 工作 


在 HIMLParserThread 线 程 中 ，WebKit 所 做 的 事情 包括 将 字符 串 解 
释 成 一 个 个 词语 ， 然 后 使 用 之 前 提 到 的 XSSAuditor 进 行 安全 检查 ， 这 
些 任 务 跟 之 前 介绍 的 没有 什么 大 的 区 别 ， 只 是 在 一 个 新 的 线程 中 执行 
me. 主要 的 区 别 在 于 解释 成 词语 之 后 ，WebKit 会 分 批 次 地 将 结果 词 
语 传递 给 泻 染 线程 ， 图 5-14 描 述 了 这 一 过 程 。 


BackgroundHTML Parser::sendTokensToMainThread() 
fi 
各 
构建 HTMLDocumentParser::ParsedChunk X} 4% Fi 
ae 
callOnMainThread H 
(HTMLDocumentParser::didReceiveParsedChunkFromBackgroundParser) 
HTMLDocumentParser::didReceiveParsedChunkFromBackgroundParser() 
HTMLDocumentParser::pumpPendingSpeculations() 
HTMLDocumentParser::processParsedChunkFromBackgroundParser() 线 
F 
HTMLDocumentParser::constructTreeFromCompactHTMLToken() 
HTMLTreeBuilder::constructTree() 


图 5-14 ”解释 器 线程 将 词语 传递 给 主线 程 的 过 程 


9.2.8 J avaScript 的 执行 


在 HIML 解 释 器 的 工作 过 程 中 ， 可 能 会 有 JavaScript 代 码 (全 局 作 
用 域 的 代码 ) 需要 执行 ， 它 发 生 在 将 字符 串 解释 成 词语 之 后 、 创 建 各 
种 节点 的 时 候 。 这 也 是 为 什么 全 局 执行 的 JavaScript 代 码 不 能 访问 DOM 
树 的 原因 因为 DOM 树 还 没有 被 创建 完 呢 。 


WebKit 将 DOM 树 创建 过 程 中 需要 执行 的 JavaScript 代 码 交 由 
HTMLScriptRunner 类 来 负责 。 工 作 方式 很 简单 ， 就 是 利用 JavaScript5| 
擎 来 执行 Node 节 点 中 包含 的 人 代码， 具体 可 以 参考 
“HTMLScriptRunner::executeParsingBlockingScript” A Eo 


为 JavaScript 代 码 可 能 会 调用 例如 “document.write()” 来 修改 文档 
结构 ， 所 以 JavaScript 代 码 的 执行 会 阻碍 后 面 节 点 的 创建 ， Bala 
会 阻碍 后 面 的 资源 下 载 ， 这 时 候 WebKit 对 需要 什么 资源 一 无 所 知 ， 这 
导致 了 资源 不 能 够 并 发 地 下 载 这 一 ei Wane. 
“示例 一 ”就 是 这 样 的 情况 ，JavaScript 代 码 的 执行 阻碍 了 后 面 img” 的 图 
片 下 载 。 当 该 “Script”* 节 点 使 用 “src”* 属 性 的 时 候 ， 情 况 可 能 变 得 更 糟 ， 
因为 WebKit 还 需要 等 待 网 络 获 取 JavaScript 文 档 ， 所 以 关于 JavaScript 的 
使 用 有 以 下 两 点 建议 。 


<img src="..”> <img src="..”> <script type=""> 
</img> </img> document.write ("”) ; 


ae | </script> 


图 5-15 ”三 个 使 用 JavaScript 的 示例 


1. 将 “script”* 元 素 加 上 “async”* 属 性 ， 表 明 这 是 一 个 可 以 异步 执行 的 
JavaScript 人 代码， 在 HTMLScriptRunner 类 中 ， 读 者 也 可 以 发 现 相应 
的 函数 执行 异步 的 JavaScript 人 代码， 图 5-15 中 示例 二 给 出 了 使 用 方 
法 。 

2. 男 外 一 种 方法 是 将 “script” 元 素 放 在 “body” 元 素 的 最 后 ， 这 样 它 不 
会 阻碍 其 他 资源 的 并 发 下 载 ， 图 5-15 中 示例 三 给 出 了 使 用 方法 。 


像 图 5-15 中 “示例 一 ”这 样 的 网 页 被 大 量 的 使 用 ，WebKit 有 什么 办 
法 能 够 处 理 这 样 的 情况 呢 ? WebKit 使 用 预 扫描 和 预 加 载 机 制 来 实现 资 
源 的 并 发 下 载 而 不 被 JavaScript 的 执行 所 阻碍 。 


具体 的 做 法 是 ， 当 遇 到 需要 执行 JavaScript 代 码 的 时 候 ，WebKit 先 
暂停 当前 JavaScript 代 码 的 执行 ， 使 用 预先 扫描 器 HTMLPreloadScanner 
类 来 扫描 后 面 的 词语 。 如 果 WebKit 发 现 它们 需要 使 用 其 他 资源 ， 那 么 
使 用 预 资源 加 载 器 HTMLResourcePreloader 类 来 发 送 请 求 ， 在 这 之 后 ， 
才 执 行 JavaScript 的 代码 。 预 先 扫 描 器 本 身 并 不 创建 节点 对 象 ， 也 不 会 
构建 DOM 树 ， 所 以 速度 比较 快 。 就 算 如 此 ， 笔 者 还 是 推荐 使 用 上 面 介 
绍 的 JavaScript 示 例 二 和 示例 三 的 建议 ， 毕 竟 不 是 所 有 泻 染 引擎 都 作 了 
如 此 的 考虑 。 


当 DOM 树 构建 完 之 后 ，WebKit 触 发 “DOMContentLoaded” 事 件 ， 
注册 在 该 事件 上 的 JavaScript 了 因数 会 被 调用 。 当 所 有 资源 都 被 加 载 完 之 
后 ，WebKit 触 发 “onload” 事 件 。 


5.2.9 XE: 理解 DOM 树 


以 第 2 章 ” 中 的 示例 代码 2-1 为 例 来 说 明 网 页 的 DOM 树 结构 。 具 体 
的 步骤 如 下 。 


1. 打开 Chrome 浏 览 器 的 开发 者 工具 ， 单 击 *console” (控制 台 ) 按 
Ho 

2. 在 控制 台中 输入 “document”， 读 者 会 看 到 整个 文档 ， 而 且 有 一 个 
以 “#document” 表 示 的 根 节点 ， 这 个 是 额外 附加 在 上 面 的 ， 表 示 的 
是 HIMLDocument 。 5-16 左 边 图 片 的 第 一 行 显 示 的 就 是 
document? Ro Ah, IAA LAS Hi A “document.firstChild” , 
在 这 个 例子 中 ， 显 然 是 html 节 点 。 接 下 来 就 是 对 DOM 树 的 遍历 ， 
可 以 使 用 “firstChild” 获 得 第 一 个 子女 ， 然 后 使 用 “nextSibling” 来 获 
得 子女 的 兄弟 。 

3. 在 控制 台中 输入 “document.”， 读 者 会 看 到 Chrome 浏 览 器 提供 一 个 
候选 列表 ， 该 列表 中 列举 了 所 有 的 “Document” 对 象 的 属性 和 方 
法 。 读 者 会 发 现 这 是 一 个 非常 长 的 列表 ， 这 些 方法 和 属性 在 
JavaScript 代 码 中 都 可 以 被 访问 或 者 调用 。 


读者 还 可 以 自行 尝试 一 些 复杂 的 网 页 来 理解 DOM 树 的 结构 ， 帮 助 
加 深 印 象 。 


> document .|ATTRIBUTE_NODE 
ATTRIBUTE_NODE A 


document 
kd 
#document CDATA_SECTION_NODE 


DOCUMENT_POSITION_CONTAINED_BY 
DOCUMENT_POSITION_CONTAINS 


DOCUMENT_POSITION_IMPLEMENTATION_SPECI... 
DOCUMENT_POSITION_PRECEDING 
DOCUMENT_TYPE_NODE 


ENTITY_REFERENCE_NODE 
NOTATION_NODE 

"tegt/css"> PROCESSING_INSTRUCTION_NODE 
img { width: 188px; } TEXT_NODE 
style> 


<title>This is a simple case.</title> 
¢/head> 


5-16 “通过 Chrome 浏 览 器 的 console 理 解 DOM 树 结构 和 接口 


5.3 DOM 的 事件 机 制 


在 介绍 了 DOM 中 的 关于 “core”* 部 分 的 内 容 后 ， 下 面 还 有 一 个 很 重 
要 的 部 分 ， 那 就 是 事件 的 处 理 机 制 。 随 着 网 页 的 交互 式 能 力 越 来 越 
强 ， 用 户 可 以 操作 网 页 中 的 很 多 内 容 ， 因 此 ， 事 件 的 处 理 就 显得 尤为 
重要 。 


5.3.1 ”事件 的 工作 过 程 


事件 在 工作 过 程 中 使 用 两 个 主体 ， 第 一 个 是 事件 (event) ， 第 二 
个 是 事件 目标 (EventTarget) 。 读 者 还 记得 Node 节 点 是 继承 自 
EventTarget 3 AY IB. WebKit FA EventTarget 38 5K X 7 DOM $I 56 A 
Events 部 分 定义 的 事件 目标 。 


每 个 事件 都 有 属性 来 标记 该 事件 的 事件 目标 。 当 事件 到 达 事 件 目 
标 (如 一 个 元 素 节点 ) 的 时 候 ， 在 这 个 目标 上 注册 的 监听 者 (Event 
Listeners) 都 会 被 触发 调用 ， 当 然 这 些 监听 者 的 调用 顺序 是 不 国定 
的 ， 所 以 不 能 依赖 监听 者 注册 的 顺序 来 决定 你 的 代码 逻辑 。 


让 我 们 看 看 DOM 标 准 是 如 何 定 义 EventTarget 接 口 的 ， 图 5-17 是 
EventTarget 接 口 的 定义 。 图 中 的 接口 是 用 来 注册 和 移 除 监听 者 的 。 


interface EventTarget { 

void addEventListener(in DOMString type, 
in EventListener listener, 
in boolean useCapture) ; 

void removeEventListener(in DOMString type, 
in EventListener listener, 
in boolean useCapture) ; 

Boolean dispatchEvent(in Event evt) raises (EventException) ; 


5-17 EventTarget#®# OE 


事件 处 理 最 重要 的 部 分 就 是 事件 捕获 (Event capture) 和 事件 冒 泡 

(Event bubbling) 这 两 种 机 制 。 为 了 说 明 这 个 问题 ， 这 里 以 W3C 官 网 

上 的 示例 图 为 基础 ， 以 示例 代码 2-1 作 为 具体 例子 来 描述 这 一 过 程 。 图 
5-18 是 事件 捕获 和 事件 冒 泡 的 过 程 。 


当 演 染 引擎 接收 到 一 个 事件 的 时 候 ， 它 会 通过 HitTest (WebKit 中 
的 一 种 检查 触发 事件 在 哪个 区 域 的 算法 ) 检查 哪个 元 素 是 直接 的 事件 
目标 。 在 图 5-18 中 ， 以 “img” 为 例 ， 假 设 它 是 事件 的 直接 目标 ， 这 样 ， 
事件 会 经 过 目 顶 向 下 和 目 底 向 上 两 个 过 程 。 


事件 的 捕获 是 自 顶 向 下 ， 这 也 就 是 说 ， 事 件 先是 到 document 节 
点 ， 然 后 一 路 到 达 目 标 节 点 。 在 图 5-18 中 ,顺序 就 是 #document”- 
>“HTML”->“body”->“img” 这 样 一 个 顺序 。 事 件 可 以 在 这 一 传递 过 程 中 
被 捕获 ， 只 需要 在 注册 监听 者 的 时 候 设 置 相应 的 参数 即 可 。 图 5-17 中 
的 接口 “addEventListener” 的 第 三 个 参数 就 是 表示 这 个 含义 。 默 认 情 况 
下 ， 其 他 节点 不 捕获 这 样 的 事件 。 如 果 网 页 注册 了 这 样 的 监听 者 ， 那 
么 监听 者 的 回调 函数 会 被 调 有 用， 函数 可 以 通过 事件 的 “stopPropagation>” 
函数 来 阻止 事件 向 下 传递 


图 5-18 ”DOM 事件 的 捕获 和 冒 泡 过 程 


事件 的 冒 泡 过 程 是 从 下 向 上 的 顺序 ， 它 的 默认 行为 是 不 冒 泡 ， 但 
是 事件 包含 一 个 是 否 冒 泡 的 属性 。 当 这 一 属性 为 真 的 时 候 ， 泻 染 引 掌 
会 将 该 事件 首先 传递 给 事件 目标 节点 的 父亲 ， 然 后 是 父 杀 的 父亲 ， 以 
此 类 推 。 同 捕获 动作 一 样 ， 这 些 监 听闻 数 也 可 以 使 用 “stopPropagation” 
疯 数 来 阻止 事件 向 上 传递 。 


5.3.2 ” WebKit 的 事件 处 理 机 制 


DOM 的 事件 分 为 很 多 种 ， 与 用 户 相 天 的 只 是 其 中 的 一 种 ， 称 为 
UIEvent， 其 他 的 包括 CustomEvent、MutationEvent 等 。UIEvent 又 可 以 
分 为 很 多 种 ， 包 括 但 是 不 限于 FocusEvent、 MouseEvent 、 
KeyboardEvent、CompositionEvent 等 。 


基于 WebKit 的 浏览 器 事件 处 理 过 程 ， 首 先是 做 HitTest， 查 找事 件 
发 生 处 的 元 素 ， 检 测 该 元 素 有 无 监听 者 。 如 果 网 页 的 相关 节点 注册 了 
事件 的 监听 者 ， 那 么 浏览 器 会 把 事件 派发 给 WebKit 内 核 来 处 理 。 同 
时 ， 浏 览 器 也 可 能 需要 理解 和 处 理 这 样 的 事件 。 这 主要 是 因为 ， 有 些 
事件 浏览 器 必须 响应 从 而 对 网 页 作 默 认 处 理 。 举 个 例子 来 讲 ， 用 户 通 
单 使 用 鼠标 滚轮 来 翻滚 网 页 。 假 如 当前 鼠标 的 位 置 就 在 一 个 HTML 元 
素 之 上 ， 该 元 素 需 要 接收 滚动 事件 ， 那 么 浏览 器 应 该 怎么 做 呢 ? 


图 5-19 就 是 用 来 描述 这 种 情况 的 一 个 例子 。 图 中 的 黑色 圆 形 ( 实 
际 上 比较 小 ， 为 了 便于 解释 ， 笔 者 将 其 放大 ) 表示 光标 的 当前 位 置 ， 
光标 下 面 的 元 素 上 注册 了 一 个 监听 鼠标 滚轮 事件 的 函数 。 那 么 ， 当 用 
户 滚动 鼠标 的 时 候 ， 事 件 由 谁 来 处 理 呢 ? 在 这 种 情况 下 ， 浏 览 器 经 过 
HitTest 之 后 ， 发 现 有 监听 者 ， 它 需要 将 这 些 事件 传 给 WebKit，WebKit 
实际 上 最 后 调用 JavaScript5 引 擎 来 触发 监听 者 函数 。 但 是 ， 浏 览 器 可 能 
也 会 根据 这 些 事件 仍然 处 理 它 的 默认 行为 ， 这 会 导致 竞争 冲突 ， 所 以 
Web 开 发 者 在 监听 者 的 代码 中 应 该 调用 事件 的 “preventDefault* 遂 数 来 
阻止 浏览 器 触发 它 的 默认 处 理 行 为 ， 也 就 是 不 需要 滚动 整个 网 页 。 


内 髓 网 页 的 外 层 界面 


-个 元 素 的 显示 区 域 蝶 标 滚轮 事件 监听 者 
PREY Seas 鼠标 滚轮 事件 监听 者 


网 页 内 容 ， 可 能 包含 事件 的 监听 者 


图 5-19 ”WebKit 和 浏览 器 的 事件 处 理 机 制 


当 事 件 的 派发 机 制 遇 到 网 页 的 框 结构 特 别 是 多 框 结构 的 时 候 ， 情 
况 变 得 稍 显 复杂 ， 这 是 因为 事件 需要 在 多 个 框 和 多 个 DOM 树 之 间 传 
递 。 当 和 触 控 事 件 (Touch Events) 被 引入 后 ， 情 况 变 得 更 为 复杂 。 关 于 
移动 领域 的 论题 ， 我 们 将 在 第 13 章 中 做 详细 讨论 。 


最 后 ， 来 了 解 一 下 事件 从 浏览 器 到 达 WebKit 内 核 之 后 ，WebKit 内 
部 的 调用 过 程 。 图 5-20 简 单 描述 了 鼠标 事件 的 调用 过 程 ， 这 一 过 程 本 
身 是 比较 简单 的 ， 复 杂 之 处 在 于 WebKit 的 EventHandler 类 。 


WebViewImp!l::handleInputEvent 


WebViewImpl::handleMouseDown 


PageWidgetEventHandler::handleMouseDown 


EventHandler::handleMousePressEvent 


图 5-20 “WebKit 处 理事 件 的 调用 栈 


EventHandler 类 是 处 理事 件 的 核心 类 ， 它 除了 需要 将 各 种 事件 传 
给 JavaScript 引 擎 以 调用 响应 的 监听 者 之 外 ， 它 还 会 识别 鼠标 事件 ， 来 
触发 调用 右键 菜单 、 拖 放 效 果 等 与 事件 密切 相关 的 工作 ， 而 且 
EventHandler 类 还 支持 网 页 的 多 框 结 构 。EventHandler 类 的 接口 比较 容 
易 理解 ， 但 是 它 的 处 理 逻 辑 极 其 复杂 ， 如 果 读 者 需要 关注 这 些 处 理 ， 
建议 仔细 分 析 代 码 。 


WebKit 中 还 有 些 跟 事件 处 理 相 关 的 其 他 类 ， 例 如 
EventPathWalker、EventDispatcher 类 等 ， 顾 名 思 义 ， 这 些 类 都 是 为 了 
解决 事件 在 DOM 树 中 传递 的 问题 ， 原 理 已 经 解释 过 了 ， 这 里 不 再 殉 


述 。 


5.3.3 ”实践 : 事件 的 传递 机 制 


为 了 理解 WebKit 的 事件 传递 机 制 ， 本 小 依旧 使 用 一 个 例子 来 说 
明 ， 浏 览 器 依然 使 用 Chrome 浏 览 器 。 


示例 代码 5-1 是 一 段 使 用 DOM 事 件 捕获 和 冒 泡 机 制 的 HTML 代 码 ， 

先 理解 一 下 这 段 代码 的 含义 。 在 JavaScript 代 码 中 ， 笔 者 定义 了 三 个 图 
数 ， 它 们 分 别 是 三 个 监听 者 水 数 。 之 后 是 注册 在 HTML 中 的 DOM 树 构 
建 好 了 之 后 调用 的 一 个 匿名 函数 。 这 个 函数 必须 要 在 DOM 树 建立 好 之 
后 才能 调用 ， 因 为 它 里 面 使 用 了 DOM 树 结构 。 该 匿名 函数 的 意义 是 为 
三 个 HIML 标 签 元 素 分 别 注 册 三 个 监听 者 函数 。 示 例 代 码 5-1 中 的 
“onImg” 和 “onDiv” 就 是 两 个 常见 的 监听 函数 。 读 者 应 该 会 注意 到 在 
“img” 元 素 的 监听 孙 数 中 ， 笔 者 将 “event” 的 "bubbles” 属 性 设置 为 
“true”， 这 表明 该 元 素 允 许 事 件 向 上 冒 泡 。 对 于 “body” 元 素来 说 ， 笔 者 
在 注册 它 的 监听 水 数 时 ， 加 入 了 第 三 个 参数 ， 该 参数 表示 捕获 到 的 目 
标 可 以 是 它 的 后 代 的 事件 。 


示例 代码 5-1 使 用 事件 捕获 和 冒 泡 机 制 的 HTML 代 码 


<html> 
<body id="body"> 


<div id="div"> 


<img src="apic.png"id="img"></img> 


</div> 


<script type="text/javascript"> 


function onBody(event) { 


} 


console.log("event capture in body."); 


function onDiv(event) { 


} 
f 


} 


wi 


} 
</S 
</bod 
</html> 


console.log("event handled in div."); 


unction onImg(event){ 
console.log("event handled in img."); 


event. bubbles=true; 


ndow. onload=function(){ 

var aimg=document.getElementById("img"); 
aimg.addEventListener("click", onImg); 

var adiv=document.getElementById("div"); 
adiv.addEventListener("click", onDiv); 

var abody=document.getElementById("body"); 


abody.addEventListener("click", onBody, true 


cript> 


y> 


对 于 示例 代码 5-1 的 网 页 ， 当 用 户 单 击 网 页 中 图 片 的 时 候 ， 浏 览 
在 控制 台 的 输出 结果 应 该 是 “onBoby” “onImg” 和 “onDiv”。 查 看 的 方 
式 是 在 Chrome 浏 览 器 中 打开 开发 者 工具 ， 然 后 选择 “console” 标 签 ， 就 
可 以 看 到 输出 的 结果 。 读 者 可 以 自行 修改 一 些 参 数 ， 看 看 输出 的 字符 
串 顺 序 是 否 和 上 自己 理解 的 相同 ， 以 帮助 目 己 了 解 是 否 确实 掌握 了 事件 
的 捕获 和 冒 泡 机 制 。 


5.4 影子 (Shadow) DOM 


影子 DOM 是 一 个 新 东西 ， 它 主要 解决 了 一 个 文档 中 可 能 需要 大 量 
交互 的 多 个 DOM 树 建立 和 维护 各 自 的 功能 边界 的 问题 。 听 起 来 有 些 绕 
口 ， 本 节 将 跟 读 者 一 起 了 解 影子 DOM 的 作用 和 用 法 ， 以 及 WebKit 是 如 
何 支 持 它 的 。 


5.4.1 什么 是 影子 DOM 


想象 一 下 网 页 的 基础 库 开 发 者 希望 开发 这 样 一 个 用 户 界 面 的 控件 
一 一 这 个 控件 可 能 由 一 些 HTML 的 标签 元 素 组 成 ， 这 些 元 素 可 以 组 成 
一 颗 DOM 树 的 子 树 。 这 样 一 个 HTML 控 件 可 以 被 到 处 使 用 ， 但 是 问题 
随 之 而 来 ， 那 就 是 每 个 使 用 控件 的 地 方 都 会 知道 这 个 子 树 的 结构 。 当 
网 页 的 开发 者 需要 访问 网 页 DOM 树 的 时 候 ， 这 些 控件 内 部 的 DOM 子 
树 都 会 暴露 出 来 ， 这 些 暴露 的 节点 不 仅 可 能 给 DOM 树 的 遍历 带 来 很 多 
麻烦 ， 而 且 也 可 能 给 CSS 的 样式 选择 带 来 问题 ， 因 为 选择 器 无 意 中 可 
能 会 改变 这 些 内 部 节点 的 样式 ， 从 而 导致 很 奇怪 的 控件 界面 。 


这 的 确 是 一 个 巨大 的 挑战 。 如 何 将 内 部 的 节点 信息 封装 起 来 ， 就 
像 C++ 语 言 的 类 一 样 ， 同 时 又 能 够 将 这 些 节点 泻 染 出 来 呢 ? 这 就 是 
W3C 工 作 组 提出 的 影子 DOM 概 念 。 影 子 DOM 的 规范 草案 能 够 使 得 一 
些 DOM 节 点 在 特定 范围 内 可 见 ， 而 在 网 页 的 DOM 树 中 却 不 可 见 ， 但 
是 网 页 泻 染 的 结果 中 包含 了 这 些 节 点 ， 这 就 使 得 封装 变 得 容易 很 多 。 


5-21 描 述 了 HTML 文 档 对 应 的 DOM 树 和 “div” 元 素 包 含 的 一 个 影 
子 DOM 子 树 。 当 使 用 JavaScript 代 码 访 问 HTML 文 档 的 DOM 树 的 时 
候 ， 通 党 的 接口 是 不 能 直接 访问 到 影子 DOM 子 树 中 的 节点 的 ， 
JavaScript 代 码 只 能 通过 特殊 的 接口 方式 。 


图 5-21 HTML 文 档 DOM 树 和 影子 DOM 子 树 


HTML5 支 持 了 很 多 新 的 特性 ， 例 如 对 视频 、 音 频 的 支持 ， 读 者 会 
发 现 这 些 元 素 其 实 是 由 很 复杂 的 控制 界面 组 成 ， 这 些 界 面 也 是 使 用 
HTML 元 素 编写 ， 但 是 在 DOM 树 中 ， 你 无 法 找到 相应 的 节点 ， 这 其 实 
也 是 使 用 了 影子 DOM 的 思想 。 


因为 影子 DOM 的 子 树 在 整个 网 页 的 DOM 树 中 不 可 见 ， 那 么 事件 
是 如 何 处 理 的 呢 ? 事件 中 需要 包含 事件 目标 ， 这 个 目标 当然 不 能 是 不 


可 见 的 DOM 节 点 ， 所 以 事件 目标 其 实 就 是 包含 影子 DOM 子 树 的 节点 
对 象 。 事 件 捕获 的 逻辑 没有 发 生变 化 ， 在 影子 DOM 子 树 内 也 会 继续 传 
递 。 当 影子 DOM 子 树 中 的 事件 向 上 冒 泡 的 时 候 ，WebKit 会 同时 向 整个 
文档 的 DOM 上 传递 该 事件 ， 以 避免 一 些 很 奇怪 的 行为 。 


5.4.2 ”WebKit 的 支持 


WebKit 已 经 支持 影子 DOM 的 规范 草案 ， 虽 然 还 存在 一 些 问题 。 支 
持 影子 DOM 的 相关 类 在 目录 “Source/core/dom/shadow” 下 ， 里 面 的 主要 
类 是 ShadowRoot， 表 示 的 是 影子 DOM 的 根 节 点 。ShadowRoot 类 继承 
自 DocumentFragment 类 ， 所 以 它 同样 有 Node 节 点 的 属性 和 方法 ， 因 而 

征 影子 DOM 树 内 部 ， 遍 历 树 没 有 什么 特别 不 同 的 地 方 。 


当 遍 历 HTML 文 档 对 应 DOM 树 的 时 候 ，WebKit 需 要 做 特别 的 判 
断 ， 所 以 读者 会 发 现在 WebKit 的 Node 类 实现 中 存在 大 量 的 条 件 语句 ， 
用 来 检查 当前 节点 是 否 是 ShadowRoot 对 象 ， 如 果 是 该 类 的 对 象 ， 把 它 
作为 不 同 DOM 树 之 间 的 边界 。 有 时 候 WebKit 还 需要 对 ShadowRoot 对 
象 作出 特别 处 理 ， 比 如 某 些 情况 会 略 过 它 的 子 树 。 同 样 的 ， 在 事件 处 
理 的 支持 类 EventPathWalker 和 EventRetargeter 中 ， 也 需要 做 一 些 特别 的 
处 理 远 辑 ， 原 理 就 是 上 面 所 述 ， 细 蔬 不 再 介绍 。 


5.4.3 ”实践 : 使 用 影子 DOM 


下 面 举 一 个 例子 来 说 明 影 子 DOM 是 如 何 被 使 用 的 ， 示 例 代 码 5-2 
给 出 了 一 个 简单 的 使 用 webkitCreateShadowRoot 接 口 来 创建 影子 DOM 
子 树 的 例子 。 网 页 只 包含 了 一 个 “div” 元 素 ，JavaScript 代 码 使 用 该 元 素 


创建 了 一 个 影子 DOM 子 树 的 根 节点 ， 然 后 该 根 节点 下 加 入 了 两 个 子 
女 ， 第 一 个 是 图 片 元 素 ， 第 二 个 是 “div” 元 素 ， 该 元 素 内 部 包含 了 一 些 
文本 。 


示例 代码 5-2 使 用 影子 DOM 的 HTML 网 页 程序 


<html> 
<body> 
<div id="div"></div> 
<script type="text/javascript"> 
window. onload=function(){ 
var adiv=document.getElementById("div"); 
var root=adiv.webkitCreateShadowRoot()j; 
var shadowImg=document.createElement("img"); 
shadowImg.src="apic.png"; 
root.appendChild(shadowImg) ; 
var shadowDiv=document.createElement("div"); 
shadowDiv.innerHTML="This is a div from shadow 
dom!"; 
root.appendChild(shadowDiv) ; 
} 
</script> 
</body> 
</html> 


读者 可 以 打开 Chrome 浏 览 器 的 开发 者 工具 ， 然 后 打开 控制 台 ， 在 
其 中 输 入 


“document.firstChild.firstChild.nextElementSibling.firstElementChild.first 
ElementChild” 后 会 发 现 结果 是 空 的 。 根 据 对 应 关系 “#document->html- 
>head->body->div->null”， 虽 然 网 页 中 没有 “head” 元 素 ， 但 是 DOM 树 仍 
然 会 创建 该 节点 。 同 时 读者 会 发 现 “div” 元 素 没 有 子女 ， 影 子 DOM 子 树 
真 的 被 隐藏 起 来 了 ， 成 为 真正 的 影子 。 


(1) 这 里 以 Chromium 浏 览 器 为 例 ， 读 者 可 以 暂且 忽略 WebFrameImpl， 之 后 会 介绍 。 


第 6 章 “CSS 解释 器 和 样式 布局 


从 整个 网 页 的 加 载 和 泻 染 过 程 来 看 ，CSS 解 释 器 和 规则 匹配 处 于 
DOM 树 建立 之 后 ，RenderObject 树 (将 在 第 7 章 介绍 ) 建立 之 前 ，CSS 
解释 器 解释 后 的 结果 会 保存 起 来 ， 然 后 RenderObject 树 基于 该 结果 来 
进行 规范 匹配 和 布局 计算 。 当 网 页 有 用 户 交 互 或 者 动画 等 动作 的 时 
候 ， 通 过 CSSOM 等 技术 ，JavaScript 代 码 同 样 可 以 非常 方便 地 修改 CSS 
代码 ，WebKit 此 时 需要 重新 解释 样式 并 重复 以 上 这 一 过 程 。 


6.1 CSS 基 本 功能 


6.1.1 简介 


先 谈 一 谈 HTML 网 页 的 开发 者 们 所 遭遇 的 痛苦 和 悲惨 的 经 历 。 在 
CSS 出 现 之 前 或 者 更 早 ，HTML 网 页 设计 者 们 因为 要 设计 不 同 风格 和 
样式 的 元 素 ， 所 以 规范 不 停 地 加 入 很 多 新 的 元 素来 表示 网 页 布局 ， 例 
如 p、 span 等 元 素 。 然 而 ， 问 题 依然 存在 ， 例 如 ， 使 用 表格 (Table) 
元 素来 排列 网 页 中 的 元 素 ， 这 可 能 存在 一 些 问题 ; 其 一 ， 表 格 经 常 内 
mag, SRMNAARA, SAR, 其 二 ， 被 搜索 引擎 解析 后 ， 
网 页 内 容 将 会 变 得 杂乱 无 章 。 所 以 这 时 候 急需 一 种 技术 来 解决 这 些 问 
题 。 庆 至 的 是 ， 此 时 CSS 出 现 了 。 


CSS 的 全 称 是 Cascading Style Sheet， 中 文 名 是 级 联 样 式 表 ， 主 要 
是 用 来 控制 网 页 的 显示 风格 。 它 被 广泛 地 使 用 在 网 页 中 ， 绝 大 多 数 的 
现代 浏览 器 都 支持 它 。CSS 的 一 个 比较 重要 的 特征 就 是 将 网 页 的 内 容 
和 内 容 的 展示 方式 分 离 ， 这 对 开发 者 提高 开发 效率 非常 有 用 。 另 一 个 


重要 的 特征 是 它 很 强大 ， 而 且 不 是 一 般 的 强大 ， 特 别 是 新 的 CSS3 标 
准 ， 不 仅 能 提供 对 页 面 任 意 元 素 的 精准 控制 ， 同 时 还 能 提供 丰富 多 采 
的 样式 。 简 而 言 之 ，CSS 是 一 种 非常 出 色 的 文本 展示 语言 。 


Web 开 发 者 有 两 种 方法 可 以 使 用 CSS， 第 一 种 就 是 示例 代码 6-1 中 
将 CSS 的 代码 放 入 元 素 “style" 中 ， 这 称 为 内 部 样式 表 ; 第 二 种 就 是 形 
如 代码 <link rel="stylesheet"type="text/css"href="css-url.css"> 这 样 的 用 
法 ， 引 用 了 一 个 外 部 的 CSS 文 要 ， 这 称 为 外 部 样式 表 。 


示例 代码 6-1 使 用 CSs 的 HTML 网 页 


1 <html> 


2 <head> 

3 <style type="text/css"> 

4 div /x 选择 器 */ 

5 t 

6 position: absolute; /* 位置 */ 
7 top: 288px; /x 坐标 */ 

8 left: 208px; /x 坐标 */ 


9 width: 208px; /x RE */ 

18 height: 20px; /* 高 度 */ 

41 background-color: tefefef; yx Ga, */ 

12 color: green; /* 颜色 af 

13 border:2px solid black; /x 边框 * 

14 padding: 20px 20px 46px 4Əpx; /= azoh xf 
15 opacity: 6.5; 

16 -webkit-transform:rotate2(16deg); /* WebkKit 内 核 支持 的 变换 属性 “7 
17 H 

18 </style> 

19 </head> 

26 <body> 

21 <p> This is a css test? </p> 

22 <div id="adiv class="aclass">CSS Style and Transform</div> 
23 <script> 

24 var rotate = 16; 

25 function loop() 

26 < 

27 var elem = document.getElementByld(“adiv"); 
28 var value = “rotate2(" + rotate + "“deg)"; 
29 elem.style.webkitTransform = value; 

36 windou.webkitRequestAnimationFrame(100p); 

31 rotate += 16; 

32 rotate = rotate % 366; 

33 H 

34 loop{); 

35 

3ő </script> 

37 </body> 

38 </htmb 


为 了 便于 谈 者 对 CSS 有 个 直观 的 印象 ， 示 例 代 码 6-1 展 示 了 一 个 使 
用 CSS 的 简单 例子 ， 后 面 很 多 描述 都 是 基于 它 来 展开 的 。 不 过 ， 该 例 


子 虽 然 简单 ， 但 却 是 一 个 展示 了 CSS 众 多 特征 的 例子 ，CSS 的 主要 部 
分 包含 在 元 素 “Style” 中 ， 也 就 是 例子 中 的 第 3 行 到 第 16 行 。 同 时 ， 
JavaScript 代 码 部 分 也 有 对 样式 的 操作 ， 如 第 29 行 ， 后 面 的 部 分 会 对 它 
们 逐一 加 以 解释 。 


样式 的 来 源 有 三 种 类 型 ， 其 一 是 网 页 开发 者 编写 的 样式 信息 ， 它 
被 包含 在 网 页 或 者 外 部 样式 文件 中 ， 这 也 是 最 常见 的 方式 ;其 二 是 网 
页 的 读者 设置 的 样式 信息 ， 读 者 可 以 设置 一 个 样式 ， 这 个 样式 可 以 应 
用 到 其 浏览 的 网 页 ; 其 三 是 浏览 器 的 内 在 默认 样式 。 以 上 三 种 类 型 的 
优先 级 自然 是 递 碱 的 。 


CSS 语 言 主要 定义 了 一 系列 作用 在 各 个 元 素 上 的 样式 规则 ， 如 示 
例 代 码 6-1 中 的 第 4 到 17 行 就 是 一 个 规则 ， 该 规则 表示 div 所 应 用 的 部 分 
样式 设置 。CSS3 标 准 中 还 有 很 多 新 的 功能 ， 示 例 代 码 6-1 中 也 描述 了 
其 中 的 一 些 功 能 ， 那 就 是 3D 变 形 (Transform) 。 这 些 样式 给 网 页 设计 
带 来 了 非常 震撼 的 视觉 效果 ， 读 者 可 以 尝试 在 浏览 器 中 运行 上 面 的 网 
页 。 这 些 新 功能 笔者 将 在 高 级 篇 中 的 第 8 章 来 介绍 。 


选择 器 : 上 面 介 绍 的 属性 选择 器 就 是 CSS3 新 加 入 的 ， 除 此 之 外 ， 
还 加 入 了 控制 精确 的 选择 器 用 来 选择 特定 位 置 的 子女 、 特 定 元 素 
标签 的 子女 等 。 

样式 : CSS3 增 加 了 一 些 比较 实用 的 功能 ， 例 如 自 定义 字体 、 圆 角 
属性 、 边 框 颜色 等 。 

变形 、 变 换 和 动画 (transform、transition 和 animation) : CSS3 
提供 了 令 人 惊奇 的 变形 、 变 换 和 动画 功能 ， 令 其 更 加 赏 心 惯 目 。 
规范 的 草案 中 仅 定 义 了 2D 的 变换 ， 而 WebKit 却 可 以 提供 3D 的 变 
形 。 变 形 有 四 种 类 型 ， 包 括 平移 、 旋 转 、 缩 放 和 扭曲 。 同 2D 变 形 
不 同 的 是 ，3D 变 形 增 加 了 绕 Z 轴 的 平移 、 旋 转 和 缩放 。 有 一 点 颇 


令 人 遗憾 ， 那 就 是 各 个 不 同 的 浏览 器 对 这 些 属 性 的 名 字 定 义 不 一 
致 ， 例 如 标准 的 变换 的 定义 属性 名 是 “transform”， 而 Webkit 的 则 
是 “-webkit-transform”， 如 例子 中 第 15 行 所 示 。 正 支持 的 是 “ms- 
transform”，Firefox 支 持 的 是 “moz-transform”，Opera 支 持 的 是 “-o- 
transform”， 这 些 不 免 令 人 心烦 意 乱 。 变 换 描述 了 属性 从 一 个 值 过 
渡 到 另 一 个 值 的 过 程 ， 定 义 了 过 程 的 时 间 、 启 动 过 程 的 延迟 时 间 
等 。 但 是 ， 这 些 规范 草案 中 的 定义 还 不 足以 描述 更 精确 的 变化 过 
程 ， 所 以 规范 引入 了 更 为 灵活 的 方式 ， 这 就 是 CSS 动 画 。Web 开 
发 者 使 用 CSS 动 画 能 够 定义 不 同 的 “keyframes” 来 控制 动画 中 间 的 
变化 过 程 而 不 仅仅 是 动画 的 开始 和 结束 。 读 者 可 以 这 么 理解 一 一 
变换 是 一 种 较为 简单 和 常见 的 动画 。 


CSS25| 入 了 一 个 概念 ， 可 以 设置 跟 *media” 相 关 的 样式 信息 ， 例 
如 用 于 屏幕 显示 、 打 印 等 。 这 样 ， 网 页 可 以 为 了 达到 不 同 的 目的 来 设 
置 CSS 样 式 信 息 ， 其 格式 形 如 “@media screen{div{color:read}}”， 它 表 
明 该 CSS 设 置 的 属性 仅仅 作用 于 屏幕 的 显示 。 


6.1.2 ”样式 规则 


样式 规则 是 CSS 规 范 中 最 基本 的 组 成 ， 通 常 ，CSS 文 档 包 含 一 系 
列 的 样式 规则 ， 如 上 所 述 ， 示 例 代码 6-1 中 的 第 4 行 到 第 17 行 就 是 一 个 
完整 的 样式 规则 。 


图 6-1 描 述 了 一 个 典型 的 CSS 规 则 结构 。 一 个 规则 包括 两 个 部 分 
一 一 规则 关 和 规则 体 。 规 则 关 由 一 个 或 者 多 个 选择 器 组 成 ， 选 择 器 随 
后 会 被 介绍 ; 规则 体 则 由 一 个 或 者 多 个 样式 声明 组 成 ， 每 个 样式 声明 


由 样式 名 和 样式 值 构 成 ， 表 示 这 个 规则 对 哪些 样式 进行 了 规定 和 设 


选择 器 样式 名 样式 值 样式 名 样式 值 


l 


样式 声明 (Declaration) 


图 6-1 ”CSS 的 样式 规则 表示 


当 HTML 中 的 某 个 元 素 经 过 后 面 的 匹配 算法 使 用 了 这 条 规则 ， 那 
么 就 将 这 些 样式 设置 成 该 元 素 的 样式 ， 除 非 有 更 高 优先 级 的 规则 匹配 
上 该 元 素 。 


6.1.3 ”选择 器 


CSS 的 选择 器 是 一 组 模式 ， 用 来 匹配 相应 的 HTML 元 素 。 当 选择 
器 匹配 相应 元 素 的 时 候 ， 该 选择 器 包含 的 各 种 样式 值 就 会 作用 于 匹配 
的 元 素 上 。 通 过 选择 器 ，CSS 能 够 精准 地 控制 HTML 页面 中 的 任意 一 
个 或 者 多 个 元 素 的 样式 属性 。 查 看 示例 代码 6-1 中 的 第 4 行 ， 该 行 中 的 
“div” 就 是 一 个 选择 器 ， 这 是 元 素 选 择 器 类 型 ， 其 含义 是 选择 该 页 面 中 
的 所 有 “div” 元 素 。 因 为 仅 有 第 20 行 包含 一 个 “div” 元 素 ， 所 以 ， 该 元 素 
会 使 用 该 选择 器 的 属性 设置 。 那 么 , “div" 元 素 下 面 所 设置 的 样式 等 属 
性 ( 花 括 号 内 ) 都 会 作用 于 该 元 素 ， 从 第 6 行 到 第 16 行 。 


示例 代码 6-1 中 的 选择 器 仪 是 众多 选择 器 类 型 中 的 一 种 ， 从 CSS1 
到 CSS3， 规 学 陆续 地 加 入 了 多 达 42 种 选择 器 ， 极 大 地 增强 了 选择 的 能 
力 ， 下 面 介 绍 其 中 一 些 主要 的 选择 器 。 


标签 选择 器 : 根据 标签 元 素 的 名 称 来 匹配 ， 例 如 示例 代码 6-1 中 
的 选择 器 。 它 可 以 选择 一 个 或 者 多 个 元 素 。 

类 型 选择 器 : 根据 类 型 信息 来 选择 目标 元 素 ， 类 型 选择 器 可 以 选 
择 一 个 或 者 多 个 元 素 ， 示 例 代 码 6-1 中 选择 div 元 素 也 可 以 使 用 类 
型 选择 器 ， 方 法 是 “.aclass”。 

ID 选择 器 : 根据 元 素 的 ID 来 选择 目标 元 素 ， 一 个 选择 器 仅 能 选择 
一 个 元 素 ， 这 是 因为 了 的 唯一 性 。 示 例 代 码 6-1 中 选择 div 元 素 也 
可 以 使 用 ID 选择 器 ， 方 法 是 “#adiv”。 

属性 选择 器 : 根据 属性 来 选择 目标 元 素 ， 可 以 选择 一 个 或 者 多 
个 ， 示 例 代 码 6-1 中 选择 div 元 素 也 可 以 使 用 属性 选择 器 ， 方 法 是 
“div[idj” “div[id=’adiv’]’, “div[id~=’di’]”. “div[id|=’ad’]”’. 

后 代 选 择 器 : 选择 某 元 素 包含 的 后 代 元 素 ， 可 以 选择 一 个 或 者 多 
个 ， 示 例 代 码 6-1 中 选择 div 元 素 也 可 以 使 用 后 代 选 择 器 ， 方 法 是 
“body div”。 

子女 选择 器 : 选择 某 元 素 包 含 的 子女 元 素 ， 可 以 选择 一 个 或 者 多 
个 ， 示 例 代 码 6-1 中 选择 div 元 素 也 可 以 使 用 子女 选择 器 ， 方 法 是 
“body>div”。 

相 邻 同胞 选择 器 : 根据 相 邻 同胞 信息 来 确定 选择 的 元 素 ， 可 以 选 
择 一 个 或 者 多 个 ， 示 例 代 码 6-1 中 选择 div 元 素 也 可 以 使 用 相 邻 同 
胞 选择 器 ， 方 法 是 “p+div”。 


还 有 很 多 其 他 类 型 的 选择 器 ， 例 如 伪 类 选择 器 、 通 用 选择 器 、 群 
组 选择 器 、 根 选择 器 等 ， 这 里 不 再 一 一 介绍 ， 请 查阅 CSS 规 范 。 


介绍 完 选择 器 之 后 ， 还 有 个 非常 重要 的 问题 ， 那 就 是 优先 级 。 对 
于 某 个 元 素 的 一 个 属性 ， 因 为 多 个 选择 器 可 能 都 作用 于 该 元 素 ， 并 且 


它们 可 能 对 该 属性 设置 了 不 同 的 属性 值 ， 这 种 情况 下 ， 应 该 怎么 确定 
使 用 哪 种 选择 器 呢 ? 


一 般 而 言 ， 选 择 器 描述 得 越 具 体 ， 它 的 优先 级 越 高 ， 也 就 是 说 选 
择 器 指向 的 越 准确 ， 它 的 优先 级 就 越 高 。 例 如 ， 如 果 用 1 表示 标签 选择 
器 的 优先 级 ， 那 么 类 选择 器 优先 级 是 10，ID 选 择 器 就 是 100， 数 值 越 
大 表示 优先 级 越 高 。 所 以 ， 尽 量 使 用 控制 精确 的 选择 器 ， 使 用 优先 级 
合理 的 选择 器 。 假 如 对 于 元 素 的 某 一 样式 属性 ， 两 个 匹配 上 的 选择 器 
都 设置 了 该 属性 值 ， 那 么 在 此 情况 下 ， 优 先 级 高 的 选择 器 所 设置 的 属 
性 值 将 会 应 用 到 该 元 素 上 。 


标准 中 还 引入 了 两 个 新 的 JavaScript 接 口 : QuerySelector 和 
QuerySelectorAll。 这 两 个 接口 让 CSS 定 义 的 所 有 选择 器 都 可 以 作为 参 
数 传 给 这 两 个 接口 ， 从 而 获取 到 相应 的 HTML 页 面 中 的 DOM 节 点 。 
Chrome、 Safari 和 Firefox 等 浏览 器 都 支持 该 接口 。 


6.1.4 ” 框 模型 


框 模型 (Box model， 或 称 箱子 模型 ) 是 CSS 标 准 中 引入 来 表示 
HTML 标 签 元 素 的 布局 结构 。 一 个 框 模 型 大 致 包括 了 四 个 部 分 ， 它 们 
从 外 到 内 分 别 是 外 边 距 (Margin) 、 边 框 (Border) 、 内 边 距 

(Padding) 和 内 容 (Content) 。 图 6-2 描 述 的 就 是 一 个 标准 的 框 模型 
结构 。 在 HTML 网 页 中 ， 每 个 可 视 元 素 (之 所 以 强调 可 视 是 因为 很 多 
HTML 元素 其 实 不 是 用 来 显示 的 ， 例 如 用 来 表示 语义 的 元 素 ) 的 布局 
都 是 按照 框 模型 来 设计 的 。 网 页 通过 对 元 素 设置 这 些 样 式 属性 ， 就 可 
以 达到 特定 的 布局 效果 。 


框 模型 中 的 最 边缘 部 分 分 别 是 四 个 方向 上 的 外 边 距 (TM, RM, 
BM, LM) ， 可 以 为 这 四 个 外 边 距 设置 不 同 的 大 小 ， 图 中 特意 将 这 些 
方向 上 的 外 边 距 绘 制 得 不 一 样 ， 也 是 表明 了 这 个 含义 。 图 中 外 边 距 往 
内 是 四 个 方向 上 的 边框 〈《 左 边框 、 右 边框 、 上 边框 、 下 边框 ) ， 再 次 
是 四 个 方向 上 的 内 边 距 ( 同 边框 类 似 )， 最 后 是 该 元 素 显 示 自 己 的 内 容 
所 使 用 的 区 域 。 


边框 (Border) 


内 容 (Content) 


内 边 踊 (Padding) 


外 边 距 (Margin) 


图 6-2 CSS 标准 的 框 模型 结构 


示例 代码 6-1 也 包含 了 框 模型 的 使 用 方法 ， 但 是 不 足以 完全 展示 这 

一 模型 。 所 以 笔者 将 它 略 作 修改 ， 变 成 示例 代码 6-2 所 示 的 代码 。 笔 者 

望 通过 专门 的 框 模型 示例 和 显示 结果 来 帮助 读者 更 直观 清晰 地 理解 
该 模型 。 


示例 代码 6-2 框 模型 的 HTML 网 页 代码 片段 


CSStths: 


#adiv/*ID 选 择 器 */ 


width: 300px; /* #E*/ 
background-color: #efefef;/*#38*/ 
border:2px solid black; /*iW#E*/ 

} 

.aclass/* 类 选择 器 */ 

{ 
border:5px solid red;/* 边 框 */ 
margin:150px 100px 10px 40px;/* 外 边 距 */ 
padding:15px 20px 25px 30px;/* 内 边 距 */ 


color :green;/* 颜 色 */ 


HTML 代 码 : 


<p> This is a test to demonstrate the mechanism of layout! 
</p> 
<div id="adiv"> 
<div class="aclass">A BC DE-FGHIJKLMNOPQ RS 
T</div> 


</div> 


图 6-3 是 示例 代码 6-2 在 Chrome 浏 览 器 中 的 显示 结果 。ID 为 “#adiv” 
的 div 元 素 被 设置 了 边框 是 为 了 让 读者 了 解 它 的 内 容 区 域 。 图 中 最 大 的 
区 域 就 是 该 div 元 素 的 内 容 区 域 ， 最 外 边 的 黑色 边框 就 是 它 的 边框 。 该 
元 素 的 内 部 就 是 “.aclass” 的 类 选择 器 所 选择 的 div 元 素 的 包含 块 ， 笔 者 
后 面 会 介绍 包含 块 的 概念 。 包 括 块 内 部 就 是 类 型 为 “.aclass” 的 div 元 素 


的 框 模型 显示 结果 ， 这 也 是 笔者 希望 描述 的 框 模型 结构 。 为 了 便于 读 
者 对 框 模型 的 理解 ， 在 显示 区 域 旁 边 的 标注 表明 了 框 模型 的 各 个 属性 
值 ， 读 者 可 以 同 图 6-2 的 框 模型 进行 对 照 ， 看 看 实际 的 效果 是 怎么 样 
的 。 


上 外 + 
边 距 4 
150pxe 


左 外 边 EAA BAW AMARE 100px 
EB 40pxe BE 30pxe EB 20px+ 


图 6-3 示例 代码 6-2 的 框 模 型 显示 结果 


框 模型 是 布局 计算 的 基础 ， 泻 染 引 擎 可 以 根据 模型 来 理解 该 如 何 
排版 元 素 以 及 元 素 之 间 的 位 置 天 系 。 


6.1.5 GAR (Containing Block) $ 
型 


当 WebKit 计 算 元 素 的 箱子 的 位 置 和 大 小 时 ，WebKit 需 要 计算 该 元 
素 和 另外 一 个 矩形 区 域 的 相对 位 置 ， 这 个 矩形 区 域 称 为 该 元 素 的 包含 
块 。 上 面 介 绍 的 框 模型 就 是 在 包含 块 内 计算 和 确定 各 个 元 素 的 ， 包 含 
块 的 具体 定义 如 下 。 


。 根 元 素 的 包含 块 称 为 初始 包含 块 ， 通 常 它 的 大 小 就 是 可 视 区 域 
(Viewport) 的 大 小 。 

。 对 于 其 他 位 置 属性 设置 为 “static” 或 者 “relative” 的 元 素 ， 它 的 包含 

块 就 是 最 近 祖 先 的 箱子 模型 中 的 内 容 区 域 (Content) 。 

如 果 元 素 的 位 置 属性 为 “fixed”， 那 么 该 元 素 的 包含 块 脱离 HTML 

文档 ， 固 定 在 可 视 区 域 的 某 个 特定 位 置 。 

如 果 元 素 的 位 置 属性 为 absolute”， 那 么 该 元 素 的 包含 块 由 最 近 的 

含有 属性 “absolute”、“relative” 或 者 “fixed” 的 祖先 决定 ， 具 体 规则 

如 下 : 如 果 一 个 元 素 具 有 “inline”* 属 性 ， 那 么 元 素 的 包含 块 是 包含 

该 祖先 的 第 一 个 和 最 后 一 个 inline 框 的 内 边 距 的 区 域 ; BU, Bs 

块 则 是 该 祖先 的 内 边 距 所 包围 的 区 域 。 


结合 实例 来 讲 ， 类 型 为 “aclass” 的 div 元 素 的 包含 块 就 是 其 父 杀 的 
内 容 区 域 ， 其 框 模型 就 是 在 该 内 容 区 域 上 进行 计算 生成 得 来 的 。 


6.1.6 ”CSS 样式 属性 


来 。 


CSS 标 准 中 定义 了 各 式 各 样 的 样式 属性 ， 用 来 描述 元 素 的 显示 效 
示例 代码 6-1 的 第 6 行 到 第 16 行 设置 了 选择 的 元 素 的 样式 属性 值 ， 


笔者 大 致 把 这 些 属性 分 成 以 下 类 别 。 


(RR: 通常 有 两 种 方式 来 设置 元 素 的 背景 ， 一 种 是 设置 背景 颜色 


(例子 中 的 background-color) ， 另 外 一 种 是 设置 背景 图 片 。 

ees 设置 文本 缩 进 、 对 齐 、 单 词 间隔 、 字 母 间 隔 、 字 符 转 换 、 
装饰 和 空白 字符 等 。 

字体 : 设置 字体 属性 ， 可 以 是 内 主 的 ， 也 可 以 是 自 定义 字体 的 方 

式 ， 另 外 还 可 以 设置 加 粗 、 变 形 等 属性 。 

列表 : 设置 列表 类 型 ， 可 以 以 字母 、 希 腊 字 母 、 数 字 等 方式 编号 

列表 。 

表格 : 通过 设置 边框 来 达到 显示 表格 的 视觉 效果 的 目的 。 设 置 是 

否 把 表格 边框 合并 为 单一 的 边框 ， 设 置 分 隔 单元 格 边框 的 距离 ， 

设置 表格 标题 的 位 置 ， 设 置 是 否 显示 表格 中 的 空 单元 格 ， 设 置 显 

示 单 元 、 行 和 列 的 算法 等 。 

定位 : CSS 提 供 元 素 的 相对 、 绝 对 定位 和 浮动 定位 。 示 例 使 用 了 

绝对 定位 ， 参 见 示例 代码 6-1 中 的 第 6 到 第 8 行 。 


6.1.7 CSSOM (CSS Object Model) 


想象 一 下 上 面 示例 代码 6-1 和 6-2 中 关于 CSS 部 分 的 代码 ， 读 者 会 发 


现 它们 都 是 静态 的 ， 那 么 CSS 有 没有 提供 一 些 方法 可 以 让 开发 者 自 定 


So 
型 。 


些 脚本 去 操作 它们 的 状态 呢 ? 这 就 是 CSSOM ， 称 为 CSS 对 象 模 
它 的 思想 是 在 DOM 中 的 一 些 节 点 接口 中 ， 加 入 获取 和 操作 CSS 属 


性 或 者 接口 的 JavaScript 接 口 ， 因 而 JavaScript 可 以 动态 操作 CSS 样 式 。 


DOM 提 供 了 接口 让 JavaScript 修 改 HTML 文档 ， 同 理 ，CSSOM 提 供 了 
接口 让 JavaScript 获 得 和 修改 CSS 代 码 设置 的 样式 信息 ， 这 听 起 来 非常 
酷 吧 ， 确 实 是 这 样 的 。 


对 于 内 部 和 外 部 样式 表 ，CSSOM 定 义 了 样式 表 的 接口 ， 称 为 
“CSSStyleSheet”， 这 是 一 个 可 以 在 JavaScript 代 码 中 访问 的 接口 。 借 助 
于 该 接口 ， 开 发 者 可 以 在 JavaScript 中 获取 样式 表 的 各 种 信息 ， 例 如 
CSS 的 “href”、 样 式 表 类 型 *type”、 规 则 信息 “cssRules” 等 ， 甚 至 可 以 获 
取样 式 表 中 的 CSS 规 则 列表 。 这 个 接口 同 DOM 中 的 “Script* 节 点 或 者 
“Link” 节 点 不 一 样 ， 它 是 CSSOM 定 义 的 新 接口 。 开 发 者 可 以 通过 
document.stylesheets 查 看 当前 网 页 中 包含 的 所 有 CSS 样 式 表 ， 这 是 因为 
CSSOM 对 DOM 中 的 Document 接 口 进行 了 扩展 ， 下 面 是 新 加 入 的 属 
性 。 


partial interface Document{ 
readonly attribute StyleSheetList styleSheets; 
attribute DOMString? selectedStyleSheetSet; 
readonly attribute DOMString? lastStyleSheetSet; 
readonly attribute DOMString? preferredStyleSheetSet; 
readonly attribute DOMString[] styleSheetSets; 
void enableStyleSheetsForSet(DOMString? name); 

}; 


通过 上 面 这 些 属性 ， 开 发 者 甚至 可 以 动态 选择 使 用 哪些 CSS 样式 
表 。 获 取 的 样式 表 就 是 前 面 定义 的 CSSStyleSheet 对 象 ，JavaScript 代 码 
可 以 修改 这 些 对 象 的 属性 ， 非 常 便 于 使 用 。 


W3C 还 定义 了 另外 一 个 规范 ， 那 就 是 CSSOM View, CH BAS 
义 是 增加 一 些 新 的 属性 到 Window、 Document, Element 、 
HTMLElement 和 MouseEvent 等 接口 ， 这 些 CSS 的 属性 能 够 让 JavaScript 
获取 视图 信息 ， 用 于 表示 跟 视 图 相关 的 特征 ， 例 如 窗口 大 小 、 网 页 滚 
动 位 移 、 元 素 的 框 位 置 、 鼠 标 事件 的 坐标 等 信息 。 这 些 特征 在 很 多 浏 
览 器 中 获得 了 支持 ， 它 们 非常 有 用 ， 下 面 以 CSSOM View 对 Window 的 
扩展 为 例 ， 笔 者 省 略 了 一 些 属性 。 


partial interface Window{ 
MediaQueryList matchMedia(DOMString 
media_query_list); 
readonly attribute Screen screen; 
//viewport 
readonly attribute long innerWidth; 
readonly attribute long innerHeight; 
//viewport scrolling 
readonly attribute long scrollx; 
readonly attribute long pagexOffset; 
readonly attribute long scrolly; 


readonly attribute long pageYOffset; 


6.1.8 XE: 理解 CSSOM 和 选择 器 


本 节 中 ， 笔 者 希望 通过 例子 来 理解 CSSOM 标 准 定义 的 内 容 ， 结 合 
选择 器 的 匹配 方法 来 加 深 对 CSS 技 术 的 认识 。 


图 6-4 是 一 个 代码 示例 图 和 在 Chrome 浏 览 器 的 控制 台中 的 信息 。 
下 面 按照 步骤 逐步 分 析 这 一 例子 。 


示例 代码 控制 台 的 语句 和 显示 结果 
¥ Style tlist {@: CSSStyleSheet, 1: CSSStyleSheet, Length: 2, 
<head> v > “csssty set 
J? ERT. sRules: CSSRuleList 
<style type="text/css" > vo: csssty /LeRule 
-aclass { color: red; } sText;: ac la { color: red; }" 
NA: pe par entRule 
le tst sh hest: Ss 
<style type="text/css"> selectorText: 
: E > style: CSSSty mapeelar ration 
div { color: green; } 
e —" pes 
</style> __proto__: CSSStyleRule 
leng zeh: 1 
head> 
EF — i cssnurel ist 
<body> a= cabled: fals 


hr 
<div>Test CCSOM1</div> 
Ne 2 aN, b nedin Medial ist 


<div class="aclass"> > ownerNo ae style 
ck RRS wnerRule: null 
pee pate oat =e entstyleSheet: null 
</div> * rules cSSRulel ist 
</body> title: ] 
text/css 
</tml> 


> : CSSStyleSheet 
ma: Csssty /leSheet 

oe 2 

可 to__: StyleSheetList 

leSheets[@].disabled = true 


图 6-4 ”理解 CSSOM 和 选择 器 的 示例 代码 和 控制 台 语 句 


1. 同样 是 在 Chrome 浏 览 器 中 运行 左边 的 网 页 ， 同 时 打开 Chrome 的 开 
发 者 工具 ， 切 换 到 控制 台 这 一 功能 。 
2. 读者 会 看 到 “Test CCSOM1” 字 符 串 的 颜色 是 绿色 的 ， 而 “Test 
CCSOM2” 字 符 串 的 颜色 是 红色 的 。 这 是 因为 例子 中 第 一 个 “div” 
元 素 只 匹配 到 第 二 个 样式 表 中 的 规则 。 而 第 二 个 “div” 元 素 ， 虽 然 
两 个 规则 对 它 而 言 都 可 以 匹配 ， 但 是 类 规则 的 优先 级 更 高 ， 因 而 
它 的 结果 是 红色 。 
3. 在 控制 台中 输入 JavaScript 语 名 “document.styleSheets”， 读 者 可 以 
看 到 当前 有 两 个 CSSStyleSheet 对 象 ， 单 击 查看 它们 的 属性 和 属性 


值 ， 跟 前 面 的 标准 对 比 一 下 。 

4 在 控制 台 中 输 入 JavaScript 语 8 
“document.styleSheets[0].disabled=true”， 读 者 在 浏览 器 中 会 发 现 
“Test CCSOM2” 变 成 绿色 的 了 ， 这 是 因为 将 第 一 个 样式 表 关 闭 
了 ， 所 以 它 不 再 起 作用 了 。 

尝试 在 开发 者 工具 的 控制 台中 输入 如 下 JavaScript 代 码 “document. 
styleSheets[1].cssRules[0].style.color=‘gray”， 读 者 会 看 到 所 有 字符 
都 变 成 灰色 的 了 ， 这 是 因为 这 条 语句 将 第 二 个 样式 表 中 的 第 一 个 
规则 中 的 字体 颜色 设置 成 了 灰色 ， 浏 览 器 即刻 生效 。 


gı 


读者 还 可 以 在 控制 台中 尝试 一 下 其 他 的 JavaScript 语 句 ， 或 者 在 更 
复杂 一 些 的 网 页 里 面 理解 规则 ， 这 里 只 是 描述 基本 原理 。 


6.2 ”CSS 解释 器 和 规则 匹配 


在 了 解 了 CSS 的 基本 概念 之 后 ， 下 面 来 理解 WebKit 如 何 来 解释 
CSS 代 码 并 选择 相应 的 规则 。 通 过 介绍 WebKit 的 主要 设施 帮助 理解 
WebKit 的 内 部 工作 原理 和 机 制 。 


6.2.1 ”样式 的 WebKit 表 示 类 


在 DOM 树 中 ，CSS 样 式 可 以 包含 在 “style” 元 素 中 或 者 使 用 “link” 来 
引用 一 个 CSS 文 档 。 对 于 CSS 样 式 表 ， 不 管 是 内 和 能 还 是 外 部 文档 ， 
WebKit 都 使 用 CSSStyleSheet 类 来 表示 。 图 6-5 描 述 了 WebKit 内 部 是 如 
何 表 示 CSS 文 档 的 。 


CSSStyleSheet 1:1 StyleSheetContents 1:n StyleRuleBase 


-m_contents -m_childRules 


— 


1:1 1:n 


StyleSheetResolver DocumentRuleSets 
-m_ruleSets > -m_authorStyle 
-m_userStyle 


图 6-5 ”CSS 的 内 部 结构 主要 类 和 关系 


A 
n 1 


1 
1 


1 
RuleSet 
-m_idRules 
-~m_classRules 
-m_tagRules 
-m_features 


DocumentStyleSheetC ollection 


-m_userStyleSheets 
-m_autherStyleSheets 


+addActiveStyleSheets() 


一 切 的 起 源 都 是 从 DOM 中 的 Document 类 开始 。 先 看 Document 类 
之 外 的 左上 部 分 : 包括 一 个 DocumentStyleSheetCollection 类 ， 该 类 包 
含 了 所 有 CSS 样 式 表 ; 还 包括 WebKit 的 内 部 表示 类 CSSStyleSheet， 它 
包含 CSS 的 href、 类 型 、 内 容 等 信息 。CSS 的 内 容 就 是 样式 信息 
StyleSheetContents， 包 含 了 一 个 样式 规则 (StyleRuleBase) 列表 。 样 
式 规 则 被 用 在 CSS 的 解释 器 的 工作 过 程 中 。 


下 面 的 部 分 WebKit 主 要 是 将 解释 之 后 的 规则 组 织 起 来 ， 用 于 为 
DOM 中 的 元 素 匹 配 相应 的 规则 ， 从 而 应 用 规则 中 的 属性 值 序列 。 这 一 
过 程 的 主要 负责 者 是 StyleSheetResolver 类 ， 它 属于 Document 类 ， 并 包 
含 了 一 个 DocumentRuleSets 类 用 来 表示 多 个 规则 集合 (RuleSet) 。 每 
个 规则 集合 都 是 将 之 前 解释 之 后 的 结果 合并 起 来 ， 并 进行 分 类 ， 例 如 
id 类 规则 、 标 签 类 规则 等 。 至 于 为 什么 是 多 个 规则 集合 ， 是 因为 这 些 
规则 集合 可 能 源 自 于 默认 的 规则 集合 (前 面 提 到 过 WebKit 使 用 默认 的 
CSS 样 式 信息 ) ， 或 者 网 页 自 定义 的 规则 集合 等 。 


下 面 让 我 们 更 进一步 重点 介绍 样式 规则 。 样 式 规 则 是 解释 器 的 输 


出 结构 ， 是 样式 匹配 的 输入 数据 。 样 式 规 则 有 很 多 类 型 ， 图 6-6 描 述 了 
这 些 类 和 继承 关系 。 
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StyleRuleFontFace StyleRuleBase StyleRuleKeyFrames 
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图 6-6 ”StyleRuleBase 和 它 的 子 类 们 


Style: 这 个 是 基本 类 型 ， 大 多 数 规则 属于 这 个 类 型 。 

Import: 是 WebKit 中 为 了 方便 而 引入 的 ， 其 对 应 的 是 一 个 导 
CSS 文 件 的 Style 元 素 。 

Media: 对 应 于 CSS 标 准 中 的 @media 类 型 。 

Fontface: CSS3 新 引入 的 自 定 义 字 体 的 规则 类 型 。 

Page: 对 应 于 CSS 标 准 中 的 @page 类 型 。 

Keyframes: 对 应 于 WebKit 中 的 @-webkit-key-frames 类 型 ， 可 以 
用 来 定制 特定 帧 的 样式 属性 信息 。 

Region: 对 CSS 标 准 正 在 进行 中 的 Regions 的 支持 ， 这 方便 了 开发 
者 对 页 面 进行 分 区 域 排 版 。 


这 些 类 基本 上 跟 CSS 的 标准 相对 应 ， 当 然 也 有 特例 ， 那 就 是 


StyleRuleImport， 它 是 WebKit 引 入 的 一 个 新 的 类 型 ， 主 要 对 应 的 是 导 
入 CSS 文 件 的 元 素 。 


接 下 来 剖析 规则 的 内 部 是 如 何 组 成 和 表示 的 。 图 6-7 描 述 的 是 一 
CSS 规 则 〈 从 示例 代码 6-1 中 获取 ) 和 WebKit 的 内 部 结构 表示 类 。 
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图 6-7 _ CSS 样式 规则 和 WebKit 的 内 部 结构 表示 类 


首先 最 外 层 的 是 样式 规则 ， 通 单一 个 样式 表 可 能 包括 一 个 或 者 多 
个 样式 规则 ， St es 的 StyleRule 类 。 


然后 是 选择 器 部 分 ， 图 的 上 半 部 分 是 一 个 选择 器 列表 ， 这 在 现实 
中 是 比较 常见 的 ， 因 为 选择 的 条 件 可 能 有 多 个 。 举 个 例子 ， 
“a[class=abc]” 其 实 人 “和 一 个 是 "a Ee T 
签 选 择 器 ， 第 二 个 是 “[class=abc]”， 一 个 属性 选择 器 。 这 两 个 选择 
器 合 起 来 的 含义 就 是 匹配 元 素 是 “a ee 它 的 类 别 为 “abc”。 选 
择 器 在 WebKit 的 内 部 表示 是 CSSSelector 类 。 在 规则 中 ，CSSSelector 类 
使 用 一 个 对 象 列表 来 表示 它们 。 


最 后 是 这 个 规则 对 应 的 属性 集合 CSSPropertySet。 WebKit 使 用 了 
一 些 类 来 分 别 表示 属性 名 字 CSSPropertyID 4 、 属 性 值 CSSValue。 
6-7 清 晰 地 描述 了 它们 的 结构 。 


6.2.2 ”解释 过 程 


CSS 解 释 过 程 是 指 从 CSS 字 符 串 经 过 CSS 解 释 器 处 理 后 变 成 泻 染 引 
擎 的 内 部 规则 表示 的 过 程 。 在 WebKit 中 ， 这 一 过 程 如 图 6-8 所 示 。 


StyleSheetContents CSSParser CSSGrammer StyleRule 


| 1: parseSheet | 


1.1: cssyyparse 


1.1.5: parse Value 


1.1.6: createStyleRule 


| 
| 
| 
u 
1.1.1: startSelector 
1.1.2: endSelector 
1.1.3: startRuleBody 
1.1.4: startProperty 
1.1.6.1: create 


1.1.6.2: endRuleBodh 


图 6-8 “CSS 解释 器 的 工作 过 程 


这 一 过 程 并 不 复杂 ， 基 本 的 思想 是 由 CSSParser 类 负责 。 
CSSParser 类 其 实 也 是 桥接 类 ， 实 际 的 解释 工作 是 由 CSSGrammeryin 
来 完成 。CSSGrammer.y.in 是 Bison 的 输入 文件 ，Bison 是 一 个 生成 解释 
器 的 工具 。 Bison 根 据 CSSGrammery.in 生成 CSS 解 释 器 一 一 


CSSGrammer 类 。 当 然 CSSGrammer 类 需要 调用 CSSParser 类 来 处 理解 释 
结果 ， 例 如 需要 使 用 CSSParser 类 创建 选择 器 对 象 、 属 性 、 规 则 等 。 


图 6-8 描 述 的 正 是 这 一 过 程 。 当 WebKit 需 要 解释 CSS 内 容 的 时 候 ， 
它 调用 CSSParser 对 象 来 设置 CSSGrammer 对 象 等 ， 解 释 过 程 中 需要 的 
回调 阅 数 由 CSSParser 来 负责 处 理 ， 最 后 WebKit 将 创建 好 的 结果 直接 设 

到 StyleSheetContents 对 象 中 ， 这 一 过 程 显得 直接 而 且 简 单 。 


在 解释 网 页 中 自 定义 的 CSS 样 式 之 前 ， 实 际 上 WebKit 泻 染 引 擎 会 
为 每 个 网 页 设置 一 个 默认 的 样式 ， 这 决定 了 网 页 所 没有 设置 的 元 素 属 
性 及 其 属性 默认 值 和 将 要 显示 的 效果 。 一 般 来 讲 ， 不 同 的 WebKit 移 植 
可 以 设置 不 同 的 默认 样式 。 下 面 是 Chrome 浏 览 器 使 用 的 默认 样式 ， 这 
些 样式 决定 了 默认 的 网 页 显示 效果 。 


"html,body,div{display:block}head{display:none}body{margin:8px}d 
iv:focus, span:focus{outline:auto Spx-webkit-focus-ring-color}a:-webkit- 
any-link{color:-webkit-link;text-decoration:underline}a:-webkit-any- 


link:active{color:-webkit-activelink}" 


6.2.3 ”样式 规则 匹配 


样式 规则 建立 完成 之 后 ，WebKit 保 存 规 则 结果 在 
DocumentRuleSets 对 象 类 中 。 当 DOM 的 节点 建立 之 后 ，WebKit 会 为 其 
中 的 一 些 节 点 (只 限于 可 视 节点 ， 在 第 7 章 中 介绍 ) 选择 合适 的 样式 信 
息 。 根 据 前 面 的 描述 ， 这 些 工作 都 是 由 StyleResolver 来 负责 的 。 当 
然 ， 实 际 的 匹配 工作 还 是 在 DocumentRuleSets 类 中 完成 的 。 


图 6-9 描 述 了 参与 样式 规则 匹配 的 WebKit 主 要 相关 类 。 基 本 的 思 
是 使 用 StyleResolver 类 来 为 DOM 的 元 素 节 点 匹配 样式 。 StyleResolver 
类 根据 元 素 的 信息 ， 例 如 标签 名 、 类 别 等 ， 从 样式 规则 中 查找 最 匹配 
的 规则 ， 然 后 将 样式 信息 保存 到 新 建 的 RenderStyle 对 象 中 。 最 后 ， 这 
些 RenderStyle 对 象 被 RenderObject 类 所 管理 和 使 用 。 


| Element | StyleResolver DocumentRuleSets 


+styleForRenderer() 
RenderObject <> 


图 6-9_ CSS 样式 规则 匹配 使 用 的 主要 WebKit 类 


规则 的 匹配 则 是 由 ElementRuleCollector 类 来 计算 并 获得 ， 它 根据 
元 素 的 属性 等 信息 ， 并 从 DocumentRuleSets 类 中 获取 规则 集合 ， 依 次 
按照 ID、 类 别 、 标 签 等 选择 器 信息 逐次 匹配 获得 元 素 的 样式 。 那 么 具 
体 的 过 程 如 何 呢 ? 图 6-10 为 我 们 描述 了 WebKit 如 何 为 HTML 元 素 获 取 
样式 并 从 规则 集合 中 匹配 的 过 程 。 
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图 6-10 ”为 HTML 元 素 获取 样式 和 WebKit 的 样式 规则 匹配 过 程 


首先 ， 当 WebKit 需 要 为 HTML 元 素 创 建 RenderObject 类 的 时 候 ， 首 
先 StyleResolver 类 负责 获取 样式 信息 ， 并 返回 RenderStyle 对 象 ， 
RenderStyle 对 象 包 含 了 匹配 完 的 结果 样式 信息 。 


其 次 ， 根 据 实 际 需求 ， e OCU al i 
依次 是 用 户 代理 (浏览 器 ) 规则 集合 、 用 户 规则 集合 和 HTML 网 页 中 
包含 的 自 定义 规则 集合 。 这 三 个 规则 的 匹配 方式 是 类 似 的 ， 这 里 是 以 
自 定义 规则 的 匹配 为 例 加 以 说 明 的 。 


再 次 ， 对 于 自 定义 规则 集合 ， 它 先 查 找 ID 规 则 ， 检 查 有 无 匹配 的 
规则 ， 之 后 依次 检查 类 型 规则 、 标 签 规则 等 。 如 果 某 个 规则 匹配 上 该 
元 素 ，WebKit 把 这 些 规 则 保存 到 匹配 结果 中 。 


最 后 ，WebKit 对 这 些 规则 进行 排序 。 对 于 该 元 素 需要 的 样式 属 
性 ，WebKit 选 择 从 高 优先 级 规则 中 选取 ， 并 将 样式 属性 值 返回 。 


6.2.4 XR: 样式 匹配 


为 了 理解 样式 的 实际 匹配 过 程 和 结果 ， 以 网 页 
“http:Wlab.hakim.se/reveal-js/ 为 例 ， 详 细 的 步骤 如 下 。 


首先 ， 打 开 Chrome 浏 览 器 输入 上 述 网 页 地 址 ， 并 打开 开发 者 工 
具 ， 单 击 “Elements” 按 钮 。 


其 次 ， 在 开发 者 工具 中 单 击 “打开 网 页 的 源 人 代码” 按钮 ， 选 择 
“body” 元 素 ， 在 开发 者 工具 的 右 侧 ， 读 者 会 看 到 如 图 6-11 左 边 部 分 所 
示 经 过 计算 的 该 元 素 的 匹配 结果 样式 (Computed Style) 。 用 户 甚 至 可 
以 直接 在 开发 者 工具 中 修改 属性 值 ， 看 看 它们 是 如 何 影响 布局 的 。 


: padding-box; 
uto; 


tion-duration 

tion-property: 
it-transition-timing-funct 
ment: scroll; 


元 素 的 样式 计算 结果 元 素 的 样式 匹配 详情 


图 6-11 网 页 的 样式 计算 和 规则 匹配 


最 后 ， 查 看 一 下 “styles” 中 的 “Matched CSS Rules”， 这 些 规则 能 够 
匹配 上 该 入 点 的 规则 列表 ， 但 是 不 同 的 属性 可 能 来 源 于 不 同 的 规则 。 
在 本 例 中 ， 读 者 可 以 看 到 图 6-11 中 右边 的 部 分 就 是 当前 匹配 上 的 各 个 
样式 规则 ， 它 们 来 源 于 不 同 的 CSS 样 式 表 中 不 同 的 规则 。 前 面 四 个 规 
则 来 源 于 网 页 自 定义 的 样式 表 ， 最 后 一 个 “user agent stylesheet” 来 源 于 
浏览 器 默认 样式 表 。 这 些 规 则 中 有 些 对 属性 的 设置 有 冲突 ， 当 然 规则 
按照 CSS 标 准 定义 的 优先 级 来 选择 。 有 
对 当前 元 素 起 作用 ， 这 包含 了 两 种 情形 : 第 一 是 属性 设置 错误 ; 第 二 
是 被 更 高 优先 级 的 规则 属性 覆盖 。 A 
以 调试 和 修改 自己 的 样式 规则 。 


6.2.5 ”JavaScript 设 置 样式 


CSSOM 定 义 了 JavaScript 访 问 样 式 的 能 力 和 方式 。 示 例 代 码 6-1 中 
的 第 29 行 所 示 的 是 使 用 CSSOM 接 口 来 更 改 属性 值 的 。 在 WebKit 中 ， 这 
需要 JavaScript 引 擎 和 泻 染 引擎 协同 完成 。 为 了 描述 这 一 过 程 ， 可 能 会 
涉及 到 一 些 JavaScript 引 擎 的 调用 ， 目 前 比较 难以 理解 ， 所 以 读者 只 需 
要 有 一 个 大 致 的 印象 即 可 ， 在 第 9 章 的 JavaScript 引 擎 中 会 有 更 详细 和 
系统 的 介绍 。 


大 致 的 过 程 是 ，JavaScript 引 筝 调用 设置 属性 值 的 公共 处 理 水 数 ， 
然后 该 函数 调用 属性 值 解 析 函 数 ， 在 这 个 例子 中 则 是 CSS 的 JavaScript 
绑 定 函数 。 而 后 WebKit 将 解析 后 的 信息 设置 到 元 素 的 “style” 属 性 的 样 
式 “webkitTransform” 中 ， 然 后 设置 标记 表明 该 元 素 需 要 重新 计算 样 


陈 ， 并 触发 重新 计算 布局 。 最 后 残 是 webKit 的 重新 绘图 ， 
了 其 中 的 主要 过 程 。 


v8::internal::JSObject::SetProperty WithInterceptor 


V8CSSStyleDeclaration::namedPropertySetter 


PropertyypertyInternalSetCSSStleDeclaration::setPro 


StylePropertySet::setPro InlineCSSStyleDeclarati 


perty on::didMutate 


StyledElement::setNeed 


sStyleRecalc() 


StyledElement::invalidat 


eStyleAttribute() 


图 6-12 WebKit 引擎 和 JavaScript 引 擎 设置 样式 


6.3 WebKit 布局 


图 6-12 描 述 


6.3.1 基础 


当 WebKit 创 建 RenderObject 对 象 之 后 ， 每 个 对 象 是 不 知道 自己 的 
位 置 、 大 小 等 信息 的 ，WebKit 根 据 框 模型 来 计算 它们 的 位 置 、 大 小 等 
言 息 的 过 程 称 为 布局 计算 《或 者 称 为 排版 ) o 


图 6-13 描 述 了 这 一 过 程 中 涉及 的 主要 WebKit 类 。 第 5 章 描述 过 
Frame 类 ， 用 于 表示 网 页 的 框 结构 ， 每 个 框 都 有 一 个 FrameView 类 ， 用 
于 表示 框 的 视图 结构 。 


RenderObject 


+layout() +layout() 
+needsLayout() +needsLayout() 


图 6-13 ”布局 计算 中 的 主要 WebKit 类 


FrameView 类 主要 负责 视图 方面 的 任务 ， 例 如 网 页 视图 大 小 、 滚 
动 、 布 局 计算 、 绘 图 等 ， 它 是 一 个 总 入 口 类 。 图 中 标注 了 两 个 跟 布 局 
计算 密切 相关 的 国 数 一 一 “ayout” 和 “eedsLayout”， 它 们 用 来 布局 计算 
和 决定 是 否 需 要 布局 计算 ， 实 际 的 布局 计算 则 是 在 RenderObject 类 
中 。 


布局 计算 根据 其 计算 的 范围 大 致 可 以 分 为 两 类 : 第 一 类 是 对 整个 
RenderObject 树 进行 的 计算 ; 第 二 类 是 对 RenderObject 树 中 某 个 子 树 的 
计算 ， 常 见于 文本 元 素 或 者 是 overflow:auto 块 的 计算 ， 这 种 情况 一 般 
是 其 子 树 布局 的 改变 不 会 影响 其 周围 元 素 的 布局 ， 因 而 不 需要 重新 计 
算 更 大 学 围 内 的 布局 。 


s 
6.3.2 ”布局 计算 
布局 计算 是 一 个 递归 的 过 程 ， 这 是 因为 一 个 节点 的 大 小 通常 需要 
先 计 算 它 的 子女 节点 的 位 置 、 大 小 等 信息 。 


图 6-14 描 述 了 RenderObject 节 点 计算 布局 的 主要 过 程 ， 中 间 省 略 了 
很 多 判断 和 步骤 ， 主 要 逻辑 都 是 由 RenderObject 类 的 "layout” 国 数 来 完 


计算 垂直 方向 上 的 外 边 距 


计算 子女 的 布局 


图 6-14 ”布局 计算 过 程 


首先 ， 该 函数 会 判断 RenderObject 节 点 是 否 需要 重新 计算 ， 通 单 
这 需要 通过 检查 位 数组 中 的 相应 标记 位 、 子 女 是 否 需要 计算 布局 等 来 
确定 。 


该 函数 会 确定 网 页 的 宽度 和 垂直 方向 上 的 外 边 距 ， 这 是 因 
是 


为 网 页 通常 是 在 垂直 方向 上 滚动 ， 而 水 平方 向 尽量 不 需要 滚动 。 


再 次 ， 该 水 数 会 遍历 其 每 一 个 子女 节点 ， 依 次 计算 它们 的 布局 。 
每 一 个 元 素 会 实现 自己 的 ”layout” 国 数 ， 根 据 特 定 的 算法 来 计算 该 类 型 
元 素 的 布局 。 如 果 页 面 元 素 定义 了 自身 的 宽 高 ， 那 么 WebKit 按 照 定 义 
Dn Ae ee a 而 对 于 像 文 本 节点 这 样 的 内 联 元 素 则 需要 
结合 其 字 小 及 文字 的 多 少 等 来 确定 其 对 应 的 宽 高 。 如 果 页 面 元 素 
FF USE WN a 过 了 布局 容器 包含 块 所 能 提供 的 宽 高 ， 同 时 其 
overflow 的 属性 为 visible 或 auto，WebKit 则 会 提供 滚动 条 来 保证 可 以 显 
示 其 所 有 内 容 。 除 非 网 页 定义 了 页 面 元 素 的 宽 高 ， 一 般 来 说 页 面 元 素 
的 宽 高 是 在 布局 的 时 候 通 过 相关 计算 得 出 来 的 。 如 果 元 素 它 有 子女 ， 
则 WebKit 需 要 递归 这 一 过 程 。 


最 后 ， 节 点 根据 它 的 子女 们 的 大 小 计算 得 出 自己 的 高 度 ， 整 个 过 
旦 结束 。 


哪些 情况 下 需要 重新 计算 布局 呢 ? 总 体 来 讲 ， 只 要 样式 发 生变 
化 ，WebKit 都 需要 重新 计算 ,但 是 实际 场景 中 ， 有 以 下 一 些 情况 。 


首先 ， 当 网 页 前 次 被 打开 的 时 候 ， 浏 览 器 设置 网 页 的 可 视 区 域 
(viewport) ， 并 调用 计算 布局 的 方法 。 这 其 实 也 描述 了 一 种 常见 的 
情景 ， 就 是 当 可 视 区 域 发 生变 化 的 时 候 ，WebKit 都 需要 重新 计算 布 
局 ， 这 是 因为 网 页 的 包含 块 的 大 小 发 生 了 改变 。 


其 次 ， 网 页 的 动画 会 触发 布局 计算 。 当 网 页 显示 结束 后 ， 动 画 可 
能 改变 样式 属性 ， 那 么 WebKit 就 需要 重新 计算 。 


然后 ，JavaScript 代 码 通过 CSSOM 等 直接 修改 样式 信息 ， 它 们 也 
会 触发 WebKit 重 新 计算 布局 。 


最 后 ， 用 户 的 交互 也 会 触发 布局 计算 ， 例 如 翻滚 网 页 ， 这 会 触发 
新 区 域 布局 的 计算 。 


CSS 的 布局 计算 是 以 包含 块 和 框 模型 为 基础 的 ， 这 表示 这 些 元 素 
的 布局 计算 都 依赖 于 块 ， 例 如 “div” 通 常 就 是 一 个 块 ， 如 前 面 所 述 它 们 
通常 是 在 垂直 方向 上 展开 。 但 是 ，CSS 标 准 也 规定 了 行 布局 形式 ， 这 
就 是 内 联 元 素 。 内 联 元 素 表 现 的 是 行 布局 形式 ， 就 是 说 这 些 元 素 以 行 
进行 显示 。 以 “div” 元 素 为 例 ， 如 果 设 置 属性 “style” 为 “display:inline” 
时 ， 则 该 元 素 是 内 联 元 素 ， 那 么 它 可 能 与 前 面 的 元 素 在 同一 行 。 如 果 
该 元 素 没 有 设置 这 个 属性 时 ， 则 是 块 元 素 ， 那 么 在 新 的 行 里 显示 。 这 
显然 会 增加 处 理 的 复杂 性 ， 为 此 ，WebKit 的 处 理 方式 是 一 一 对 于 一 个 
块 元 素 对 应 的 RenderObject 对 象 ， 它 的 子女 要 么 都 是 块 元 素 的 
RenderObject 对 象 ， 要 么 都 是 非 内 联 元 素 对 应 的 RenderObject 对 象 ， 这 
可 以 通过 建立 匿名 块 (Anonymous Block) 对 象 来 实现 ， 在 下 一 章 也 会 
ENA. O 


布局 计算 相对 也 是 比较 耗 时 间 的 ， 更 糟糕 的 是 ， 一 旦 布局 发 生变 
化 ，WebKit 就 需要 后 面 的 重新 绘制 操作 。 另 一 方面 ， 减 少 样式 的 变动 
而 依赖 现在 HTML5 的 新 功能 可 以 有 效 地 提高 网 页 的 泻 染 效率 ， 这 些 在 
后 面 介绍 绘图 的 时 候 一 并 分 析 。 


6.3.3 布局 测试 


在 这 里 介绍 布局 测试 (Layout Tests) 貌似 也 有 点 文 不 对 题 ， 因 为 
其 实 布局 测试 不 仅 测 试 布局 ， 还 包括 泻 染 等 综合 泻 染 结果 。 本 章 主要 
介绍 CSS 的 样式 计算 和 布局 计算 ， 不 过 它们 也 或 多 或 少 存 在 联系 。 


布局 测试 可 以 说 是 WebKit 中 最 重要 并 且 最 著名 的 测试 了 ， 用 于 测 
试 网 页 的 整个 泻 染 结果 ， 包 括 网 页 加 载 和 泻 染 整个 过 程 。 泻 染 引 擎 要 
处 理 各 式 各 样 越 来 越 复杂 的 网 页 ， 这 需要 布局 测试 来 保证 引擎 的 泻 染 
结果 的 正确 性 。 基 本 测试 工作 方式 是 : 预先 准备 大 量 用 于 单元 测试 的 
网 页 和 期 望 的 泻 染 结果 ， 然 后 使 用 WebKit 编 译 出 来 的 pumpRenderTree 
(DRT) 来 测试 网 页 ， 把 得 到 的 结果 和 期 望 的 结果 进行 对 比 ， 以 检查 
WebKit 引 擎 对 网 页 排版 布局 等 的 正确 性 。 每 个 webKit 的 移植 都 会 提供 
一 个 DumpRenderTree ，.4) 通常 由 于 移植 的 差异 性 ， 它 们 的 期 望 结果 
也 不 一 样 ， 所 以 通常 每 个 移植 都 有 特殊 的 期 望 结 果 。 


每 个 测试 都 会 有 一 个 或 者 多 个 期 望 结果 ， 一 般 情况 下 ， 期 望 结 
是 一 些 文 本 结果 。 但 是 ， 对 一 些 复杂 的 测试 ， 单 纯 的 文本 不 能 够 满足 
需求 ， 因 为 测试 泻 染 结果 可 能 需要 比较 布局 、 字 体 、 图 片 等 ， 所 以 这 
时 候 期 望 结 果 其 实 是 一 幅 图 片 (还 有 其 他 类 型 ) ， 这 个 图 片 其 实 才 是 
网 页 应 该 泻 染 的 结果 。 可 惜 的 是 ， 由 于 字体 、 平 台 的 样式 等 差异 ' 
(如 Qt、GTK 等 就 不 一 样 ) ， 相 同 的 网 页 泻 染 出 的 结果 可 能 不 一 样 ， 
所 以 ， 读 者 可 以 看 到 布局 测试 对 不 同 的 移植 会 有 不 同 的 期 望 结 果 。 


一 般 来 讲 ， 当 开发 者 提交 新 的 代码 补丁 包 时 ， 需 要 先进 行 布局 测 
试 ， 只 有 当 该 测试 通过 并 且 没 有 造成 其 他 的 测试 出 现 新 错误 的 时 候 ， 
才 有 可 能 被 WebKit 项 目 所 接受 。 如 果 读者 提交 代码 的 目的 是 解决 一 个 
新 问题 ， 那 么 ， 强 烈 建议 读者 提交 一 个 新 的 测试 用 例 来 保证 代码 的 正 
确 性 。 


(D 为 了 考虑 效率 ， 属 性 名 的 字符 串 会 被 转换 成 ID。 


(2) 在 描述 CSS 的 时 候 ， 读 者 可 能 会 发 现 其 实 里 面 有 很 多 复杂 的 特殊 处 理 情况 ， 这 些 更 多 
是 特别 细节 层次 上 的 处 理 ， 有 兴趣 的 读者 可 以 在 RenderObject 类 和 它 的 子 类 中 阅读 并 理解 这 些 
细节 。 


(3) Chromium 自 从 使 用 Blink 后 改变 了 这 一 做 法 。 


第 7 章 ” 泻 染 基础 


在 第 6 章 中 ， 笔 者 详细 解释 了 CSS 样 式 如 何 被 解释 器 处 理 和 匹配 ， 
以 及 WebKit 如 何 进 行 布 局 计算 。 实 际 上 ，WebKit 的 布局 计算 使 用 
RenderObject 树 并 保存 计算 结果 到 RenderObject 树 中 。RenderObject 树 
同 其 他 树 (如 RenderLayer 树 等 ) ， 构 成 了 WebKit 泻 染 的 主要 基础 设 
施 。 本 章 介绍 实现 WebKit 为 网 页 泻 染 而 构造 的 各 种 类 型 的 内 部 结构 表 
示 ， 并 介绍 基本 的 网 页 软件 泻 染 方式 ， 这 些 内 部 结构 和 泻 染 方式 设施 
对 WebKit 而 言 既 是 必要 的 组 成 ， 又 能 对 性 能 问题 产生 重要 的 影响 。 


7.1 RenderObject 树 


7.1.1 RenderObject 基 础 类 


为 了 解释 本 章 的 内 容 ， 首 先 使 用 一 个 网 页 示例 代码 来 说 明 。 示 例 
代码 7-1 是 一 个 网 页 的 产 代 码 ， 它 的 结构 很 简单 ， 主 要 由 一 些 HTML 基 
本 元 素 组 成 ， 例 如 html、head、div、a、img、table 等 ， 然 后 它 还 包含 
了 一 个 特别 的 HIML5 元 素 canvas， 而 且 还 有 一 小 段 JavaScript 代 
码 。 考 虑 到 一 些 没有 很 强 HIML5 背 景 的 读者 ， 简 单 解 释 一 下 这 上段 
JavaScript 代 码 的 含义 。 这 段 代 码 是 为 “canvas” 元 素 创 建 一 个 WebGL 

(3D 绘 图 技术 ) 的 上 下 文 对 象 (Context) ， 有 了 这 个 对 象 ，Web 开 发 
者 就 可 以 在 canvas 元 素 上 绘制 任何 3D 的 内 容 。 这 个 类 似 于 OpenGL 或 者 
OpenGLES 的 上 下 文 概 念 ， 关 于 canvas 元 素 、canvas2D 和 WebGL 会 在 第 
8 章 中 做 介绍 。 


示例 代码 7-1 一 个 简单 的 网 页 示例 源 代码 


<html> 
<head> 
</head> 
<body> 
<div> abc</div> 
<canvas id="“webgl" width=""86" height="86"></canvas> 
<a href="http://thisisaa’></a> 


<img></img> 
<input type="button"></input> 
<select></select> 
<table width=""166" height=""56"> 
<tr> 
<td> db</td> 
</tr> 
</table> 


<script type="text /javascript"> 
var canvas = document .getElementByld("webgl1""}; 
var gl = canvas.getContext ("experimental—-webgl""); 
if (fgl) < 
alert("There's no WebGL context available.""); 
return; 
F 
</script> 
</body> 
</html> 


上 面 的 代码 经 过 WebKit 解 释 之 后 ， 生 成 的 DOM 树 读者 应 该 能 够 很 
容易 想象 得 出 。 在 DOM 树 构建 完成 之 后 ，WebKit 所 要 做 的 事情 就 是 为 
DOM 树 节点 构建 RenderObject 树 。 那 么 什么 是 RenderObject 呢 ? 它 的 作 
用 是 什么 呢 ? 下 面 笔者 就 逐步 来 揭 开 它 的 面纱 。 


在 DOM 树 中 ， 某 些 节点 是 用 户 不 可 见 的 ， 也 就 是 说 这 些 只 是 起 一 
些 其 他 方面 而 不 是 显示 内 容 的 作用 。 例 如 表示 HTML 文 件 头 的 “meta” 
节点 ， 在 最 终 的 显示 结果 中 ， 用 户 是 看 不 到 它 的 存在 的 ， 笔 地 称 之 为 
“ 非 可 视 化 节点 ”。 该 类 型 其 实 还 包含 很 多 元 素 ， 例 如 示例 代码 7-1 中 的 
“head”, “script" 等 。 而 另外 的 节点 就 是 用 来 展示 网 页 内 容 的 ， 例 如 示 
例 代 码 7-1 中 的 "body” “div”, “span”, “canvas”, “img” 等 ， 这 些 节点 
可 以 显示 一 块 区 域 ， 如 文字 、 图 片 、2D 图 形 等 ， 被 称 为 “可 视 节 点 ”。 


对 于 这 些 “ 可 视 节 点 ”， 因 为 WebKit 需 要 将 它们 的 内 容 绘 制 到 最 终 
的 网 页 结果 中 ， 所 以 WebKit 会 为 它们 建立 相应 的 RenderObject 对 象 。 


一 个 RenderObject 对 象 保 存 了 为 绘制 DOM 节 点 所 需要 的 各 种 信息 ， 例 
如 样式 布局 信息 ， 经 过 WebKit 的 处 理 之 后 ，RenderObject 对 象 知 道 如 
何 绘制 自己 。 这 些 RenderObject 对 象 同 DOM 的 节点 对 象 类 似 ， 它 们 也 
构成 一 棵 树 ， 在 这 里 我 们 称 之 为 RenderObject 树 。 RenderObject 树 是 基 
于 DOM 树 建立 起 来 的 一 棵 新 树 ， 是 为 了 布局 计算 和 泻 染 等 机 制 而 构建 
的 一 种 新 的 内 部 表示 。RenderObject 树 节点 和 DOM 树 节点 不 是 一 一 对 
应 关系 ， 那 么 哪些 情况 下 为 一 个 DOM 节 点 建立 新 的 RenderObject 对 象 
呢 ? 以 下 是 三 条 规则 ， 从 这 些 规 则 出 发 会 为 DOM 树 节点 创建 一 个 
RenderObject 对 象 。 


。 DOM 树 的 document 节 点 。 

。DOM 树 中 的 可 视 节点 ， 例 如 html、body、div 等 。 而 WebKit 不 会 为 
非 可 视 化 节点 创建 RenderObject 节 点 ， 例 如 上 面 提 到 的 一 些 例 
子 。 

。 菜 些 情况 下 WebKit 需 要 建立 匿名 的 RenderObject 节 点 ， 该 节点 不 
对 应 于 DOM 树 中 的 任何 节点 ， 而 是 webKit 处 理 上 的 需要 ， 典 型 的 
例子 就 是 匿名 的 RenderBlock 节 点 。 


前 面 介绍 了 影子 DOM， 那 么 WebKit 该 如 何 处 理 影 子 DOM 树 中 的 
节点 呢 ? WebKit 处 理 影子 DOM 没 有 什么 特别 的 不 同 ， 虽 然 JavaScript 
代码 没 法 访问 影子 DOM， 但 是 webKit 需 要 创建 并 泻 染 RenderObject。 


WebKit 在 创建 DOM 树 被 创建 的 同时 也 创建 RenderObject 对 象 。 当 
然 ， 如 果 DOM 树 被 动态 加 入 了 新 节点 ，WebKit 也 可 能 创建 相应 的 
RenderObject 对 象 。 图 7-1 示 例 的 是 RenderObject 对 象 被 创建 时 所 涉及 的 
主要 类 。 


+attach() 
+createRendererlfNeeded() +createRendererForElementlfNeeded() 
+createRenderer() +createRendererForTextifNeeded() 
+parentRenderer() 

+nextRenderer() 


1 

1 

| 

| 

1 
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RenderObject 


+createObject() 
+addChild() 


图 7-1 从 DOM 节 点 到 创建 RenderObject 节 点 


3S Element®t RAB 1 AVA A “attach” KIM, ZR A Element 
对 象 是 否 需 要 创建 RenderObject。 如 果 需 要 ， 该 水 数 会 使 用 
NodeRenderingContext 类 来 根据 DOM 节 点 的 类 型 来 创建 对 应 的 
RenderObject 节 点 。 


DOM 树 中 ， 元素 节 点 包含 很 多 类 型 。 同 DOM 树 一 样 ， 
RenderObject 树 中 的 节点 也 有 很 多 类 型 。 图 7-2 描 述 了 RenderObject 类 和 
CHEETA, AH 司 的 是 RenderObject 类 ， 它 包含 了 RenderObject 的 
ERAN, 大 概 可 以 分 成 以 下 几 类 。 


。 为 了 遍历 和 修改 RenderObject 树 而 涉及 的 众多 阔 数 ， 人 遍历 操作 思 
数 如 parent()、firstChild()、nextSibling()、 previousSibling() 等 ， 修 
改 操 作 遂 数 如 addChild()、removeChild() 等 。 

。 用 来 计算 布局 和 获取 布局 相关 信息 的 函数 ， 例 如 layoutO、 
style(). enclosingBox()o 

。 用 来 判断 该 RenderObject 对 象 属于 哪 种 类 型 的 子 类 ， 这 里 面 有 各 
式 各 样 的 类 似 *IsASubClass” 的 函数 ， 这 些 孙 数 可 以 知道 它们 的 类 
型 以 作 相 应 的 转换 。 


。 跟 RenderObject 对 象 所 在 的 RenderLayer 对 象 相关 的 操作 ， 这 些 操 
作 将 在 下 一 节 中 再 描述 。 

。 坐标 和 绘图 相关 的 操作 ，WebKit 使 用 这 些 操 作 让 RenderObject 对 
象 将 内 容 绘 制 在 传 入 的 绘制 结果 对 象 中 ， 例 如 paint()、repaint() 
Fo 


其 实 WebKit 还 定义 了 其 他 各 式 各 样 的 类 ， 这 里 只 描述 一 些 主要 部 
分 和 后 面 使 用 到 的 函数 。 


RenderBR RenderCombineText RenderSVGImage RenderSVG Shape 
RenderText RenderObject RenderSVGModel 
一 过 < 一 
Renderlnline RenderBoxModelObject 
一 已 
A 
RenderReplaced RenderBox RenderView 
> 
A A 
Renderlmage RenderTableC ol RenderBlock RenderTable 
Kt+-— 


7-2 ”RenderObject 基 类 和 它 的 主要 子 类 


RenderBoxModelObject 类 是 描述 所 有 跟 CSS 中 的 框 模型 相关 联 类 
的 基 类 ， 所 以 读者 能 够 看 到 子 类 例如 RenderInline 类 (div:inline-box) 
RenderBox 类 。RenderBox 类 则 是 使 用 箱子 模型 的 类 ， 它 包括 了 外 边 
边框 、 内 边 距 和 内 容 等 信息 。 


RenderBlock 类 用 来 表示 块 元 素 。 为 了 处 理 上 的 方便 ，WebKit 某 些 
情况 下 需要 建立 匿名 的 RenderBlock 对 象 ， 因 为 RenderBlock 的 子女 必 
须 都 是 内 衣 的 元 素 或 者 都 是 非 内 裔 的 元 素 。 所 以 ， 当 RenderBlock 对 象 
包含 两 种 元 素 的 时 候 ，WebKit 会 为 相 邻 的 内 鹃 元 素 创 建 一 个 块 节点 ， 


W gi RenderBlock R, ABIREAMRARAARITARROT 
X, MBIRS XA RTA N RendeBokH RNFR. AFESZ 
RenderObject 对 象 它 没有 对 应 的 DOM 树 中 的 节点 ， 所 以 WebKit 统 一 使 
用 Document 节 点 来 对 应 匿名 对 象 。 


还 有 很 多 RenderObject 类 的 子 类 并 没有 在 图 中 表示 出 来 ， 典 型 的 
如 RenderVideo 类 ， 它 继承 自 RenderImage 类 ， 笔 者 将 在 第 11 章 中 介绍 
me 
Ko 


7.1.2 RenderObject 树 


RenderObject 对 象 构成 了 一 棵 树 。RenderObject 树 的 创建 过 程 主要 
是 由 NodeRenderingContext 类 来 负责 ， 图 7-3 描 述 了 WebKit 如 何 创 建 
RenderObject 对 象 并 构建 RenderObject 树 的 。 


Element NodeRenderingContext RenderObject 


1: createRendererlfNeeded 


2: new NodeRenderingContext 


3: createRgndererForElementifNeeded 


3.1: parentRenderer 


3.2: nextRenderer 


bject 


3.4: addChild 


3.5: return 


图 7-3 ”RenderObject 对 象 和 RenderObject 树 的 创建 过 程 


基本 思路 是 ， 首 先 WebKit 检 查 该 DOM 节 点 是 否 需要 创建 
RenderObject 对象。 如 果 需 要 ，WebKit 建 立 或 者 获取 一 个 创建 
RenderObject 对 象 的 NodeRenderingContext 对 KR , 
NodeRenderingContext 对 象 会 分 析 需 要 创建 的 RenderObject 对 象 的 父 杀 
节点 、 兄 第 节点 等 ， 设 置 这 些 信息 后 完成 插入 树 的 动作 。 


那么 建立 后 的 RenderObject 树 和 DOM 树 之 间 的 对 应 关系 是 怎么 样 
的 呢 ? 根据 示例 代码 7-1 中 网 页 的 产 代 码 ，WebKit 中 的 DOM 树 表示 如 
7-4 左 边 所 示 的 结构 (省 略 了 一 些 次 要 节点 ) ， 图 7-4 右 边 描述 的 就 
是 WebKit 中 对 应 的 RenderObject 树 。 
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图 7-4 DOM 树 节点 和 RenderObject 树 的 对 应 关系 


图 7-4 使 用 虚线 箭头 表示 两 种 树 的 节点 对 应 关系 ， 其 中 
HTMLDocument 节点 对 应 RenderView 节点 ， RenderView 节 点 是 
RenderObject 树 的 根 节点 。 另 外 ， 从 图 中 可 以 看 出 ，WebKit 没 有 为 
HTMLHeadElement 节 点 〈 非 可 视 化 元 素 ) 没有 被 创建 RenderObject 子 
类 的 对 象 。 


7.2 ”网 页 层次 和 RenderLayer 树 


7.2.1 ”层次 和 RenderLayer 对 象 


第 2 章 介 绍 了 网 页 的 层次 结构 ， 也 就 是 说 网 页 是 可 以 分 层 的 ， 这 有 
两 点 原因 ， 一 是 为 了 方便 网 页 开发 者 开发 网 页 并 设置 网 页 的 层次 ， 二 
是 为 了 WebKit 处 理 上 的 便利 ， 也 就 是 说 为 了 简化 泻 染 的 逻辑 。 


WebKit 会 为 网 页 的 层次 创建 相应 的 RenderLayer 对 象 。 当 某 些 类 型 
RenderObject 的 节点 或 者 具有 某 些 CSS 样 式 的 RenderObject 节 点 出 现 的 
时 候 ，WebKit 就 会 为 这 些 节点 创建 RenderLayer 对 象 。 一 般 来 说 ， 某 个 
RenderObject 节 点 的 后 代 都 属于 该 节点 ， 除 非 webKit 根 据 规 则 为 某 个 
后 代 RenderObject 点 创建 了 一 个 新 的 RenderLayer 对 象 。 


RenderLayer 树 是 基于 RenderObject 树 建立 起 来 的 一 棵 新 树 。 根 据 
上 面 所 述 笔者 可 以 得 出 这 样 的 结论 : RenderLayer 节 点 和 RenderObject 
节点 不 是 一 一 对 应 关系 ， 而 是 一 对 多 的 关系 。 那 么 哪些 情况 下 的 
RenderObject 节 点 需要 建立 新 的 RenderLayer 节 点 呢 ? 以 下 是 基本 规 
则 。 


。DOM 树 的 Document 节 点 对 应 的 RenderView 节 点 。 

DOM 树 中 的 Document 的 子女 节点 ， 也 就 是 HTML 节 点 对 应 的 
RenderBlock 节 点 。 

显 式 的 指定 CSS 位 置 的 RenderObject 节 点 。 

。 有 透明 效果 的 RenderObject 节 点 。 


。 节 点 有 溢出 (Overflow) 、alpha 或 者 反射 等 效果 的 RenderObject 
TI Flo 

。 使 用 Canvas 2D 和 3D (WebGL) 技 术 的 RenderObject 节 点 。 

。 Video 节 点 对 应 的 RenderObject 节 点 。 


除了 根 节点 也 就 是 RenderLayer 节 点 ， 一 个 RenderLayer 节 点 的 父 条 
就 是 该 RenderLayer 节 点 对 应 的 RenderObject 节 点 的 祖先 链 中 最 近 的 祖 
先 ， 并 且 和 祖先 所 在 的 RenderLayer 节 点 同 该 节点 的 RenderLayer 节 点 不 
同 。 基 于 这 一 原理 ， 这 些 RenderLayer 节 点 也 构成 了 一 棵 RenderLayer 
树 。 


每 个 RenderLayer 节点 包含 的 RenderObject 节 点 其 实 是 一 棵 
RenderObject 子 树 。 理 想 情 况 下 ， 每 个 RenderLayer 对 象 都 会 有 一 个 后 
端 类 ， 该 后 端 类 用 来 存储 该 RenderLayer 对 象 绘制 的 结果 。 实 际 情况 中 
则 比较 复杂 ， 在 不 同 的 泻 染 模式 下 ， 不 同 WebKit 的 移植 中 ， 情 况 都 不 
一 样 ， 这 些 在 后 面 介 绍 。RenderLayer 节 点 的 使 用 可 以 有 效 地 减 小 网 页 
结构 的 复杂 程度 ， 并 在 很 多 情况 下 能 够 减少 重新 泻 染 的 开销 。 


在 WebKit 创 建 RenderObject 树 之 后 ，WebKit 也 会 创建 RenderLayer 
树 。 当然 菜 些 RenderLayer 节 点 也 有 可 能 在 执行 JavaScript 代 码 时 或 者 更 
新 页 面 的 样式 被 创建 。 同 RenderObject 类 不 同 的 是 ，RenderLayer 类 没 
有 子 类 ， 它 表示 的 是 网 页 的 一 个 层次 ， 并 没有 “ 子 层次 ”的 说 法 。 


7.2.2 ”构建 RenderLayer 树 


RenderLayer 树 的 构建 过 程 其 实 非 常 简单 ， 甚 至 比 构 建 
RenderObject 树 还 要 简单 。 根 据 前 面 所 述 的 条 件 来 判断 一 个 


RenderObject $ FA z= A a 22 WZ — Tt AY RenderLayr TR, FIRS 
RenderLayer 对 象 的 父亲 和 兄 第 关系 即 可 ， 这 里 不 再 介绍 。 


为 了 直观 地 理解 RenderLayer 树 ， 根 据 示例 代码 7-1 中 的 源 代 码 ， 
WebKit 中 的 RenderObject 树 表示 如 图 7-5 左 边 所 示 的 结构 (省 略 了 一 些 
节点 ) ， 图 7-5 的 右边 描述 的 就 是 WebKit 所 生成 的 对 应 RenderLayer 
树 。 根 据 RenderLayer 对 象 创建 的 条 件 来 看 ， 该 示例 代码 的 RenderLayer 
树 应 该 包含 三 个 RenderLayer 节 点 一 一 根 节 点 和 它 的 子女 ， 以 及 叶 节 


RenderLayer 
RenderLayer 


RenderLayer 


RenderObject 树 RenderLayer 树 


7-5 ”RenderObject 树 和 RenderLayer 树 的 关系 


在 上 一 章 ， 笔 者 介绍 了 布局 计算 ， 本 章 紧 接着 又 介绍 了 
RenderObject 树 和 RenderLayer 树 ， 通 过 一 些 示意 图 ， 相 信 读 者 应 该 理 
解 这 些 概念 的 含义 。 下 面 来 看 一 下 示例 代码 7-1 在 WebKit 中 的 实际 内 部 
表示 和 布局 信息 ， 图 7-6 是 WebKit 内 部 表示 的 具体 结构 RenderObject 
树 、 RenderLayer 树 和 布局 信息 中 的 大 小 和 位 置信 息 。 下 面 根据 
RenderLayer 树 的 节点 来 分 析 它 们 。 


首先 ， 图 7-6 中 的 "layer at (x, x)” 表 示 的 是 不 同 的 RenderLayer 节 
点 ， 下 面 所 有 RenderObject 子 类 的 对 象 均 属于 该 RenderLayer 对 象 。 以 
第 一 个 RenderLayer 节 点 为 例 ， 它 对 应 于 DOM 树 中 的 Document 节 点 。 
后 面 的 “(0, 0)” 表 示 该 节点 在 网 页 坐标 系 中 的 位 置 ， 最 后 的 “1028x683” 
信息 表示 该 节点 的 大 小 ， 第 一 层 包 含 的 RenderView 节 点 后 面 的 信息 也 
是 同样 的 意思 。 


layer at (0,0) size 1028x683 
RenderView at (0,0) size 1028x683 
layer at (0,0) size 1028x683 
RenderBlock {HTML} at (0,0) size 1028x683 
RenderBody {BODY} at (8,8) size 1012x667 
RenderBlock {DIV} at (0,0) size 1012x20 
RenderText {#text} at (0,0) size 22x19 
text run at (0,0) width 22: "abc" 
RenderBlock (anonymous) at (0,20) size 1012x838 
RenderText {#text} at (80,65) size 4x19 
text run at (80,65) width 4: " " 
RenderInline {A} at (0,0) size 6x6 [color=#00Q0EE] 
RenderText {#text} at (0,0) size 0x0 
RenderImage {IMG} at (84,80) size 6x9 
RenderText {#text} at (84,65) size 4x19 
text run at (84,65) width 4: " " 
RenderButton {INPUT} at (90,64) size 16x22 [bgcolor=#DDDDDD] [border: (2px outset #DDDDDD) ] 
RenderText {#text} at (108,65) size 4x19 
text run at (108,65) width 4: " " 
RenderMenuList {SELECT} at (114,65) size 25x20 [bgcolor=#DDDDDD] [border: (1px solid #000000) ] 
RenderBlock (anonymous) at (1,1) size 23x18 
RenderBR at (4,1) size 0x16 [bgcolor=#DDDDDD] 
RenderText {#text} at (0,0) size @x0 
enderTable {TABLE} at (0,108) size 100x50 
RenderTableSection {TBODY} at (0,0) size 100x50 
RenderTableRow {TR} at (0,2) size 100x46 
RenderTableCell {TD} at (2,14) size 96x22 [r=0 c=0 rs=1 cs=1] 
RenderText {#text} at (1,1) size 16x19 
text run at (1,1) width 16: "de" 
layer at (8,28) size 80x80 
RenderHTMLCanvas 


图 7-6 示例 代码 7-1 的 布局 信息 、RenderObject 树 和 RenderLayer 树 


其 次 ， 读 者 仔细 查看 其 中 最 大 的 部 分 ， 也 就 是 第 二 个 layer， 其 包 
含 了 HTML 中 的 绝 大 部 分 元 素 。 这 里 有 三 点 需要 解释 一 下 : 第 一 ， 
“head” 元 素 没 有 相应 的 RenderObject 对 象 ， 如 上 面 所 解释 的 ， 因 为 
“head” 不 是 一 个 可 视 的 元 素 ; 第 二 , “canvas” 元 素 并 在 第 二 个 layer 中 ， 
而 是 在 第 三 个 layer (RenderHTMLCanvas) 中 ， 虽 然 该 元 素 仍 然 是 
RenderBody 节点 的 子女 ; 第 三 ， 该 layer 层 中 包含 一 个 匿名 


(Anonymous) 的 RenderBlock 节 点 ， 该 匿名 节点 包含 了 RenderText 和 
RenderInline 等 子 节点 ， 原 因 之 前 已 经 介绍 过 。 


BR, 来 看 一 下 第 三 个 layer 层 ， 也 就 是 最 下 面 的 层 。 因 为 
JavaScript 代 码 为 “canvas” 元 素 创 建 了 一 个 WebGL 的 3D 绘 图 上 下 文 对 
象 ，WebKit 需 要 重新 生成 一 个 新 的 RenderLayer 对 象 。 


最 后 ， 来 说 明 一 下 三 个 层次 的 创建 时 间 。 在 创建 DOM 树 之 后 ， 
WebKit 会 接着 创建 第 一 个 和 第 二 个 layer 层 。 但 是 ， 第 三 个 RenderLayer 
对 象 是 在 WebKit 执 行 JavaScript 代 码 时 才 被 创建 的 ， 这 是 因为 WebKit 需 
要 检查 出 JavaScript 代 码 是 否 为 “canvas” 人 确实 创建 了 3D 绘 图 上 下 文 ， 而 
不 是 在 遇 到 “canvas” 元 素 时 创建 新 的 RenderLayer 对 象 。 


基于 上 面 的 描述 ， 相 信 大 家 已 经 对 布局 计算 结果 、RenderObject 
树 和 RenderLayer 树 有 了 更 进一步 的 了 解 。 


7.3” 泻 染 方式 


7.3.1 绘图 上 下 文 
(GraphicsContext) 


上 面 介 绍 了 WebKit 的 内 部 表示 结构 ，RenderObject 对 象 知 道 如 何 

会 制 自己 ， 但 是 ， 问 题 是 RenderObject 对 象 用 什么 来 绘制 内 容 呢 ? 在 
i 绘图 操作 被 定义 了 一 个 抽象 层 ， 这 就 是 绘图 上 下 文 ， 所 有 
绘图 的 操作 都 是 在 该 上 下 文中 来 进行 的 。 绘 图 上 下 文 可 以 分 成 两 种 类 
一 种 是 用 来 绘制 DD 图形 的 上 下 文 ， 称 之 为 2D 绘 图 上 下 文 


(GraphicsContext) ; 第 二 种 是 绘制 3D 图 形 的 上 下 文 ， 称 之 为 3D 绘 图 
EFX (GraphicsContext3D) 。 这 两 种 上 下 文 都 是 抽象 基 类 ， 也 就 是 
说 它们 只 提供 接口 ， 因 为 WebKit 需 要 支持 不 同 的 移植 。 而 这 两 个 抽象 
基 类 的 具体 绘制 则 由 不 同 的 移植 提供 不 同 的 实现 ， 每 个 移植 使 用 的 实 
际 绘图 类 非常 不 一 样 ， 依 赖 的 图 形 率 也 不 一 样 ， 图 7-7 描 述 了 抽象 类 和 
WebKit 的 移植 实现 类 的 关系 。 


CGContext 
GraphicsContext PlatformGraphicsContext 

+pla ri a a. 

mon PlatformContextSkia 


CGLContextObj 


+platformContext3D() 
+active Texture() 


GraphicsC ontext3D i PlatformGraphicsContext3D 


GrContext 


图 7-7 绘图 上 下 文 类 和 移植 相关 的 绘图 上 下 文 类 


PlatfromGraphicsContext 类 和 PlatformGraphicsContext3D 类 是 两 个 
表示 上 下 文 的 类 ， 其 实 它 们 的 类 定义 取决 于 各 个 移植 。 在 WebKit 的 
Safari 移 植 中 ， 这 两 个 类 其 实 是 CGContext 和 CGLContextObj; 而 在 
Chromium 移 植 中 ， 它 们 则 是 PlatformContextSkia 和 GrContext。 同 之 前 

首 述 的 基 类 和 子 类 的 关系 不 一 样 ， 这 些 不 是 父子 类 关系 ， 而 是 WebKit 
直接 通过 C 语 言 的 typedef 来 将 每 个 不 同 移植 的 类 重 命 名 成 
PlatfromGraphicsContext 和 PlatformGraphicsContext3D。 


2D 绘 图 上 下 文 的 具体 作用 就 是 提供 基本 绘图 单元 的 绘制 接口 以 及 


设置 绘图 的 样式 。 绘 图 接口 包括 画 点 、 男 线 、 男 图 片 、 男 多 边 形 、 男 
文字 等 ， 绘 图 样式 包括 颜色 、 线 宽 、 字 号 大 小 、 渐 变 等 。 


RenderObject 对 象 知道 自己 需要 画 什 么 样 的 点 ， 什 么 样 的 图 片 ， 所 以 
RenderObject 对 象 调用 绘图 上 下 文 的 这 些 基本 操作 就 是 绘制 实际 的 显 
示 结 果 ， 图 7-8 描 述 了 RenderObject 类 和 GraphicsContext 类 的 关系 。 


RenderObject Graphics Context 
+drawLineForBoxSide() +setFillColor() 


+addPDFURLRect() +setFillPattemn() 
+drawRect() 
+drawLine() 
+drawlmage() 


图 7-8 ”描述 了 RenderObject 和 绘图 上 下 文 之 间 的 关系 。 


关于 3D 绘 图 上 下 文 的 介绍 ， 我 们 将 在 第 8 章 中 介绍 ， 它 的 主要 用 
处 是 支持 CSS3D、WebGL 等 。 


在 现 有 的 网 页 中 ， 由 于 HTML5 标 准 引 入 了 很 多 新 的 技术 ， 所 以 同 
一 网 页 中 可 能 会 既 需 要 使 用 2D 绘 图 上 下 文 ， 也 需要 使 用 3D 绘 图 上 下 
文 。 对 于 2D 绘 图 上 下 文 来 说 ， 其 平台 相关 的 实现 既 可 以 使 用 CPU 来 完 
成 2D 相 关 的 操作 ， 也 可 以 使 用 3D 图 形 接口 (如 OpenGL) 来 完成 2D 相 
天 的 操作 。 而 对 于 3D 绘 图 上 下 文 来 说 ， 因 为 性 能 的 问题 ，WebKit 的 移 
值 通常 都 是 使 用 3D 图 形 接口 (如 OpenGL 或 者 Direct3D 等 技术 ) KR 
现 。 


7.3.2 ERA 


在 完成 构建 DOM 树 之 后 ，WebKit 所 要 做 的 事情 就 是 构建 泻 染 的 内 
部 表示 并 使 用 图 形 库 将 这 些 模 型 绘制 出 来 。 提 到 网 页 的 泻 染 方式 ， 
前 主要 有 两 种 方式 ， 第 一 种 是 软件 泻 染 ， 第 二 种 是 硬件 加 速 泻 染 。 
实 这 种 描述 并 不 精确 ， 因 为 还 有 一 种 混合 模式 。 要 理解 这 一 概念 ， 
者 还 得 接着 本 章 介 绍 的 RenderLayer 树 来 继续 深入 挖掘 。 


dit ot OO 


每 个 RenderLayer 对 象 可 以 被 想象 成 图 像 中 的 一 个 层 ， 各 个 层 一 同 
构成 了 一 个 图 像 。 在 泻 染 的 过 程 中 ， 浏 览 器 也 可 以 作 同 样 的 理解 。 每 
个 层 对 应 网 页 中 的 一 个 或 者 一 些 可 视 元 素 ， 这 些 元 素 都 绘制 内 容 到 该 
BŁ, 在 本 书 中 ， 一 律 把 这 一 过 程 称 为 绘图 操作 。 如 果 绘 图 操作 使 用 
CPU 来 完成 ， 那 么 称 之 为 软件 绘图 。 如 果 绘 图 操作 由 GPU 来 完成 ， 称 
之 为 GPU 硬件 加 速 绘 图 。 理 想 情 况 下 ， 每 个 层 都 有 个 绘制 的 存储 区 
域 ， 这 个 存储 区 域 用 来 保存 绘图 的 结果 。 最 后 ， 需 要 将 这 些 层 的 内 容 
合并 到 同一 个 图 像 之 中 ， 本 书 中 称 之 为 合成 (Compositing) ， 使 用 了 
合成 技术 的 泻 染 称 之 为 合成 化 泻 染 。 


所 以 在 RenderObject 树 和 RenderLayer 树 之 后 ，WebKit 的 机 制 操 作 
将 内 部 模型 转换 成 可 视 的 结果 分 为 两 个 阶段 : 每 层 的 内 容 进 行 绘图 工 
作 及 之 后 将 这 些 绘图 的 结果 合成 为 一 个 图 像 。 对 于 软件 泻 染 机 制 ， 
WebKit 需 要 使 用 CPU 来 绘制 每 层 的 内 容 ， 按 照 上 面 的 介绍 ， 读 者 可 能 
觉得 需要 合成 这 些 层 ， 其 实 软件 泻 染 机 制 是 没有 合成 阶段 的 ， 为 什 
A? 原因 很 简单 ， 没 有 必要 。 人 在 软件 演 染 中 ， 通 常 泻 染 的 结果 就 是 一 
个 位 图 (Bitmap) ， 绘 制 每 一 层 的 时 候 都 使 用 该 位 图 ， 区 别 在 于 绘制 
的 位 置 可 能 不 一 样 ， 当 然 每 一 层 都 按照 从 后 到 前 的 顺序 。 当 然 ， 你 也 
可 以 为 每 层 分 配 一 个 位 图 ， 问 题 是 ， 一 个 位 图 就 已 经 能 够 解决 所 有 问 
题 。 图 7-9 是 网 页 的 三 种 泻 染 方式 。 


CPU 内 存 GPU 内 存 GPU 内 存 


软件 泻 染 使 用 软件 绘图 的 合成 化 泻 染 硬件 加 速 的 合成 化 泻 染 


图 7-9 ”网 页 的 三 种 泻 染 方 式 


从 上 图 可 以 看 到 ， 软 件 泻 染 中 网 页 使 用 的 一 个 位 图 ， 实 际 上 就 是 
一 块 CPU 使 用 的 内 存 空间 。 图 7-9 中 的 第 二 种 和 第 三 种 方式 ， 都 是 使 用 
了 合成 化 的 泻 染 技术 ， 也 就 是 使 用 GPU 硬件 来 加 速 合 成 这 些 网 页 层 ， 
合成 的 工作 都 是 由 GPU 来 做 ， 这 里 称 为 硬件 加 速 合 成 (Accelerated 
Compositing) 。 但 是 ， 对 于 每 个 层 ， 这 两 种 方式 有 不 同 的 选择 。 其 中 
某 些 层 ， 第 二 种 方式 使 用 CPU 来 绘图 ， 另 外 一 些 层 使 用 GPU 来 绘图 。 
对 于 使 用 CPU 来 绘图 的 层 ， 该 层 的 结果 首先 当然 保存 在 CPU 内 存 中 ， 
之 后 被 传输 到 GPU 的 内 存 中 ， 这 主要 是 为 了 后 面 的 合成 工作 。 第 三 种 
泻 染 方 式 使 用 GPU 来 绘制 所 有 合成 层 。 第 二 种 方式 和 第 三 种 方式 其 实 
都 属于 硬件 加 速 泻 染 方式 。 前 面 的 这 些 描 述 ， 是 把 RenderLayer 对 象 和 
实际 的 存储 空间 对 应 ， 现 实 中 不 是 这 样 的 ， 这 只 是 理想 的 情况 。 路 

到 这 里 ， 读 者 可 能 感到 奇怪 为 什么 会 有 三 种 泻 染 方式 ， 这 是 因为 
三 种 方式 各 有 各 的 优 缺 点 和 适用 场景 ， 在 介绍 它们 的 特点 之 前 ， 先 了 
解 一 些 泻 染 方面 的 基本 知识 。 


首先 ， 对 于 常见 的 2D 绘 图 操作 ， 使 用 GPU 来 绘图 不 一 定 比 使 用 
CPU 绘图 在 性 能 上 有 优势 ， 例 如 绘制 文字 、 点 、 线 等 ， 原 因 是 CPU 的 


使 用 缓存 机 制 有 效 减少 了 重复 绘制 的 开销 而 且 不 需要 GPU 并 行 性 。 其 


‘ha 
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GPU 的 内 存 资源 相对 CPU 的 内 存 资源 来 说 比较 紧张 ， 而 且 网 页 的 


分 层 使 得 GPU 的 内 存 使 用 相对 比较 多 。 鉴 于 此 ， 就 目前 的 情况 来 看 ， 
三 者 都 存在 是 有 其 合理 性 的 ， 下 面 分 析 一 下 它们 的 特点 。 


软件 泻 染 是 目前 很 常见 的 技术 ， 也 是 浏览 器 最 早 使 用 的 泻 染 方 式 
这 一 技术 比较 节省 内 存 ， 特 别 是 更 宝贵 的 GPU 内 存 ， 但 是 软件 泻 
染 只 能 处 理 2D 方 面 的 操作 。 简 单 的 网 页 没有 复杂 绘图 或 者 多 媒体 
方面 的 需求 ， 软 件 泻 染 方式 就 比较 合适 来 泻 染 该 类 型 的 网 页 。 问 
题 是 ， 一 旦 遇 上 了 HTML5 的 很 多 新 技术 ， 软 件 泻 染 显然 无 能 类 
力 ， 一 是 因为 能 力 不 足 ， 典 型 的 例子 是 CSS3D、WebGL 等 ; 二 是 
因为 性 能 不 好 ， 例 如 视频 、Canvas 2D 等 。 所 以 ， 软 件 泻 染 技术 被 
使 用 得 越 来 越 少 ， 特 别 是 在 移动 领域 。 软 件 泻 染 同 硬件 加 速 泻 染 
另外 一 个 很 不 同 的 地 方 就 是 对 更 新 区 域 的 处 理 。 当 网 页 中 有 一 个 
更 新 小 型 区 域 的 请 求 (如 动画 ) 时 ， 软 件 泻 染 可 能 只 需要 计算 一 
个 极 小 的 区 域 ， 而 硬件 泻 染 可 能 需要 重新 绘制 其 中 的 一 层 或 者 多 
层 ， 然 后 再 合成 这 些 层 。 硬 件 泻 染 的 代价 可 能 会 大 得 多 。 

对 于 硬件 加 速 的 合成 化 泻 染 方式 来 说 ， 每 个 层 的 绘制 和 所 有 层 的 
合成 均 使 用 GPU 硬件 来 完成 ， 这 对 需要 使 用 3D 绘 图 的 操作 来 说 特 
别 适 合 。 这 种 方式 下 ， 在 RenderLayer 树 之 后 WebKit 和 
Chromium 还 需要 建立 更 多 的 内 部 表示 ， 例 如 GraphicsLayer 树 、 合 
成 器 中 的 层 (如 Chromium 的 CCLayer) 等 ， 目 的 是 支持 硬件 加 速 
机 制 ， 这 显然 会 消耗 更 多 的 内 存 资源 。 但 是 ， 一 方面 ， 硬 件 加 速 
机 制 能 够 支持 现在 所 有 的 HIML5 定 义 的 2D 或 者 3D 绘 图 标准 ; 另 
一 方面 ， 关 于 更 新 区 域 的 讨论 ， 如 果 需 要 更 新 某 个 层 的 一 个 区 
域 ， 因 为 软件 泻 染 没有 为 每 一 层 提 供 后 端 存储 ， 因 而 它 需 要 将 和 
这 个 区 域 有 重 冯 部 分 的 所 有 层次 的 相关 区 域 依次 从 后 向 前 重新 绘 


制 一 遍 ， 而 硬件 加 速 泻 染 只 需要 重新 绘制 更 新 发 生 的 层次 。 因 而 
在 某 些 情况 下 ， 软 件 泻 染 的 代价 更 大 。 当 然 ， 这 取决 于 网 页 的 结 
构 和 泻 染 策略 ， 这 些 都 是 需要 重点 关注 和 讨论 的 。 

软件 绘图 的 合成 化 泻 染 方式 结合 了 前 面 两 种 方式 的 优点 ， 这 是 因 
为 很 多 网 页 可 能 既 包 含 基本 的 HTML 元 素 ， 也 包含 一 些 HTML5 新 
功能 ， 使 用 CPU 绘 图 方式 来 绘制 某 些 层 ， 使 用 GPU 来 绘制 其 他 一 
些 层 。 原 因 当 然 是 前 面 所 述 的 基于 性 能 和 内 存 方面 综合 考虑 的 结 
果 。 


7.4 WebKit {HERRA 
7.4.1 ”软件 泻 染 过 程 


在 很 多 情况 下 ， 也 就 是 没有 那些 需要 硬件 加 速 内 容 的 时 候 (包括 
但 不 限于 CSS3 3D 变 形 、CSS3 03D 变 换 、WebGL 和 视频 ) ，WebKit 可 
以 使 用 软件 泻 染 技术 来 完成 页 面 的 绘制 工作 (除非 读者 强行 打开 硬件 
加 速 机 制 ) ， 目 前 用 户 浏览 的 很 多 门户 网 站 、 论 坛 网 站 、 社 交 网 站 等 
所 设计 的 网 页 ， 都 是 采用 这 项 技术 来 完成 页 面 的 泻 染 。 名 


要 分 析 软 件 泻 染 过 程 ， 需 要 关注 两 个 方面 ， 其 一 是 RenderLayer 
树 ， 其 二 是 每 个 RenderLayer 所 包含 的 RenderObject 子 树 。 首 先 来 看 
WebKit 如 何 遍历 RenderLayer 树 来 绘制 各 个 层 。 


对 于 每 个 RenderObject 对 象 ， 需 要 三 个 阶段 绘制 自己 ， 第 一 阶段 
是 绘制 该 层 中 所 有 块 的 背景 和 边框 ， 第 二 阶段 是 绘制 浮动 内 容 ， 第 三 
阶段 是 前 景 (Foreground) ， 也 就 是 内 容 部 分 、 轮 廓 〈 它 是 CSS 标 准 属 


性 ， 绘 制 于 元 素 周围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ) 等 部 分 。 当 
然 ， 每 个 阶段 还 可 能 会 有 一 些 子 阶 段 。 值 得 指出 的 是 ， 内 启 元 素 的 背 
景 、 边 框 、 前 景 等 都 是 在 第 三 阶段 中 被 绘制 的 ， 这 是 不 同 之 处 。 


图 7-10 描 述 了 一 个 RenderLayer 层 是 如 何 绘 制 自己 和 子女 的 ， 这 一 
过 程 是 一 个 递归 过 程 。 图 中 的 函数 名 未 来 可 能 会 发 生变 化 ， 所 以 读者 
更 多 关注 它们 的 含义 。 图 中 的 调用 顺序 可 以 作 如 下 理解 : 这 里 主要 节 
选 了 一 些 重要 步 又 ， 事实 上 这 一 绘制 过 程 还 可 能 包含 其 他 一 些 相 对 较 
小 的 步骤 。 图 中 有 些 步 又 的 操作 并 不 是 总 是 发 生 。 这 里 是 一 个 大 致 的 
过 程 ， 下 面 是 详细 分 析 。 
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paintLayer() 


paintLayerContentsAndReflection() 


reflectionlayer()->paintLayer() 
paintLayerContents() 
paintBackgroundF orFragments() 


paintList (z 坐标 为 负数 的 子女 层 ) 


paintF oregroundF orFragments() 


paintOutlineF orFragments() 


paintList (子女 有 overflow 属性 ) 


paintList (z 坐标 为 正 数 的 子女 层 ) 


paintMaskF orFragments() 


7-10 ”绘制 RenderLayer 和 它 的 子女 的 调用 过 程 


1. 对 于 当前 的 RenderLayer 对象 而 言 ，WebKit 首 先 绘制 反射 层 
(Reflectionlayer) ， 这 是 由 CSS 定 义 的 。 

. 然后 WebKit 开 始 绘 制 RenderLayer 对 象 对 应 的 RenderObject 节 点 的 
背景 层 ( PaintBackground-ForFragments ) ， 也 就 是 调用 
“PaintPhaseBlockBackground” KZ, iB id EX E N EA bl AW 
象 的 背景 层 ， 而 不 包括 RenderObject 的 子女 。 其 中 “Fragments” 的 
含义 是 可 能 绘制 的 几 个 区 域 ， 因 为 网 页 需要 更 新 的 区 域 可 能 不 是 
连续 的 ， 而 是 多 个 小 块 ， 所 以 WebKit 绘 制 的 时 候 需要 更 新 这 些 非 
连续 的 区 域 即 可 ， 下 面 也 是 一 样 的 道理 。 

. 图 中 的 “paintList”(z 坐 标 为 负数 的 子女 层 ) 阶段 负责 绘制 很 多 Z 坐 
标 为 负数 的 子女 层 。 这 是 一 个 递归 过 程 。Z 坐 标 为 负数 的 层 在 当 
前 RenderLayer 对 象 层 的 后 面 ， 所 以 WebKit 先 绘制 后 面 的 层 ， 然 后 
当前 RenderLayer 对 象 层 可 能 覆盖 它们 。 

4. 图 中 “PaintForegroundForFragments()” 这 个 步骤 比较 复杂 ， 包 括 以 
下 四 个 子 阶段 : 首先 进入 “PaintPhaseChildBlockBackground” 阶 
段 ，WebKit 绘 制 RenderLayer 节 点 对 应 的 RenderObject 节 点 的 所 有 
后 代 节 点 的 背景 ， 如 果 某 个 被 选中 的 话 ，WebKit 改 为 绘制 选中 区 
HES (网 页 内 容 选中 的 时 候 可 能 是 另外 的 颜色 ) ; 其次， 进入 
“PaintPhaseFloat” 绘 制 阶段 ，WebKit 绘 制 浮 动 的 元 素 ; 再 次 ， 进 入 
“PaintPhaseForeground” 阶 段 ，WebKit 绘 制 RenderObject 节 点 的 内 
容 和 后 代 节 点 的 内 容 (如 文字 等 ) > RA, HA 
“PaintPhaseChildOutlines” 绘 制 阶段 ，WebKit 的 目的 是 绘制 所 有 后 
代 节 点 的 轮廓 。 

5. 进入 “PaintOutlineForFragments” 步 又 。 WebKit 在 该 步骤 中 绘制 
RenderLayer 对 & 对 应 的 RenderObject 节点 的 轮廓 


N 


UJ 


(PaintPhaseOutline) o 
6. 进入 绘制 RenderLayer 对 象 的 子女 步骤 。WebKit 首 先 绘制 溢出 
(Overflow) 的 RenderLayer 节 点 ， 之 后 依次 绘制 Z 坐 标 为 正 数 的 
RenderLayer7 Ro 
7. 进入 该 RenderObject 节 点 的 滤 镜 步骤 。 这 是 CSS 标 准 定义 在 元 素 之 
上 的 最 后 一 步 。 


上 面 是 从 RenderLayer 节 点 和 它 所 包含 的 RenderObject 子 树 来 解释 
软件 绘图 这 一 过 程 ， 那 么 对 于 RenderLayer 树 包含 的 每 个 RenderObject 
而 言 ， 它 们 是 如 何 被 处 理 的 呢 ? 


因为 RenderObject 类 有 很 多 子 类 ， 每 个 子 类 都 不 一 样 ， 不 过 很 多 
子 类 的 绘制 其 实 比 较 简 单 ， 所 以 ， 为 了 能 比较 清楚 地 说 明 
RenderObject 绘 制 的 过 程 ， 这 里 以 典型 的 RenderBlock 类 为 例 来 说 明 ， 
因为 它 是 以 框 模型 为 基础 的 类 ， 图 7-11 给 出 了 绘制 RenderBlock 类 的 过 


程 。 


paint() 


paintObject() 


paintBoxDecorations() PaintPhaseBlockBackground 阶段 


|: PaintPhaseBlockBackground 或 者 
paintContents() n 
m~ PaintPhaseSelfOutline 阶段 
paintChildren() 
> paintChild 0 


paintSelection() 
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i PaintPhaseFloat 或 者 PaintPhaseSelection 等 阶段 
paintFloats () 


paintOuiline H PaintPhaseOutline 或 者 PaintPhaseSelfOutline 等 


阶段 


paintCaret () 


ih 


PaintPhaseF oreground 阶段 


图 7-11 RenderBlock 类 的 绘制 过 程 


图 7-11 中 , “paint” 是 RenderObject 基 类 的 绘图 函数 ， 用 来 绘制 该 对 
象 的 入 口 函 数 ， 在 RenderBlock 类 中 ， 它 被 重新 实现 了 。 一 个 
RenderObject 类 的 “paint” 卫 数 在 绘制 时 可 能 会 被 多 次 调用 ， 因 为 不 同 的 
绘制 阶段 (图 7-10 提 到 的 ) 都 需要 调用 它 来 绘制 不 同 的 部 分 ， 所 以 读 
者 会 发 现 图 7-11 右 侧 标 记 了 在 哪些 阶段 才 会 调用 该 绘制 水 数 (或 者 是 
哪些 阶段 该 水 数 不 会 被 调用 ) ， 至 于 这 些 阶段 的 顺序 则 是 由 
RenderLayer 对 象 中 的 调用 过 程 来 控制 的 。 


中 的 “paintContents” 国 数 主要 用 来 遍历 和 绘制 它 的 子女 ， 在 某 些 
情况 下 ，WebKit 其 实 并 不 需要 该 水 数 ， 例 如 RenderLayer 对 象 仅 需要 绘 
制 对 应 的 RenderObject 子 树 的 根 节点 的 时 候 。 


对 于 其 他 类 型 的 节点 ， 绘 制 过 程 大 致 是 这 一 过 程 的 一 个 子 集 。 例 
如 RenderText 类 没有 子女 ， 也 不 需要 绘制 框 模型 的 边框 等 ， 所 以 


WebKit 仅 需要 绘制 自己 的 内 容 。 


在 上 面 这 一 过 程 中 ，Webkit 所 使 用 的 绘图 上 下 文 都 是 2D 的 ， 因 为 
没有 GPU 加 速 ， 所 以 3D 的 绘图 上 下 文 没有 办 法 工作 。 这 意味 着 ， 每 一 
层 上 的 RenderObject 子 树 中 不 能 包含 使 用 3D 绘 图 的 节点 ， 例 如 Canvas 
3D (WebGL) 节点 等 。 同 时 ， 每 个 RenderLayer 层 上 使 用 的 CSS 3D 变 
形 等 操作 也 没有 办 法 得 到 支持 。 


最 开始 的 时 候 ， 也 就 是 webKit 第 一 次 绘制 网 页 的 时 候 ，WebKit 绘 
制 的 区 域 等 同 于 可 视 区 域 大 小 。 而 这 在 之 后 ，WebKit 只 是 首先 计算 需 
要 更 新 的 区 域 ， 然 后 绘制 同 这 些 区 域 有 交集 的 RenderObject 节 点 。 这 
也 就 是 说 ， 如 果 更 新 区 域 跟 某 个 RenderLayer 节 点 有 交集 ，WebKit 会 继 
续 查 找 RenderLayer 树 中 包含 的 RenderObject 子 树 中 的 特定 一 个 或 一 些 
节点 ， 而 不 是 绘制 整个 RenderLayer 对 应 的 RenderObject 子 树 。 图 7-12 
昔 述 了 在 软件 泻 染 过 程 中 WebKit 实 际 更 新 的 区 域 ， 也 就 是 之 前 描述 软 
件 泻 染 过 程 的 生成 结果 。 


可 视 区 域 
大 小 的 网 更 新 区 域 


页 内 容 


图 7-12 ”WebKit 绘 制 网 页 的 更 新 区 域 


WebKit 软 件 泻 染 结果 的 储存 方式 ， 在 不 同 的 平台 上 可 能 不 一 样 ， 
但 是 基本 上 都 是 CPU 内 存 的 一 块 区 域 ， 多 数 情 况 下 是 一 个 位 图 


(Bitmap) 。 至 于 这 个 位 图 如 何 处 理 ， 如 何 跟 之 前 绘制 的 结果 合并 ， 
如 何 显示 出 来 ， 都 跟 WebKit 的 不 同 移植 相关 。 下 面 介绍 一 下 Chromium 
是 如 何 处 理 的 。 


7.4.2 “Chromium 的 多 进程 软件 泻 染 
技术 


在 Chromium 的 设计 和 实现 中 ， 因 为 设计 者 引入 了 多 进程 模型 ， (3) 
所 以 Chromium 需 要 将 泻 染 结果 从 Renderer 进 程 传递 到 Browser 进 程 。 


先 来 看 看 Renderer 进 程 。 前 面 介绍 了 WebKit 的 Chromium 移 植 的 接 
口 类 是 RenderViewImpl， 访 类 包含 一 个 用 于 表示 一 个 网 页 的 泻 染 结果 
的 WebViewImpl 类 。 其 实 ，RenderViewImpl 类 还 有 一 个 作用 就 是 同 
Browser 进 程 通信 ， 所 以 它 继承 自 RenderWidget 类 。RenderWidget 类 不 
仅 负 责 调 度 页 面 泻 染 和 页 面 更 新 到 实际 的 WebViewImpl 类 等 操作 ， 而 
且 它 负责 同 Browser 进 程 的 通信 。 另 一 个 重要 的 设施 是 PlatformCanvas 
类 ， 也 就 是 SkiaCanvas (Skia 是 一 个 2D 图 形 库 ) ，RenderObject 树 的 实 
际 绘制 操作 和 绘制 结果 都 由 该 类 来 完成 ， 它 类 似 于 2D 绘 图 上 下 文 和 后 
端 存储 的 结合 体 。 


再 来 看 看 Browser 进 程 。 第 一 个 设施 就 是 RenderWidgetHost 类 , 一 
样 的 必 不 可 少 ， 它 负责 同 Renderer 进 程 的 通信 。RenderWidgetHost 类 的 
作用 是 传递 Browser 进 程 中 网 页 操作 的 请 求 给 Renderer 进 程 的 
RenderWidget 类 ， 并 接收 来 目 对 方 的 请 求 。 第 二 个 是 BackingStore 类 ， 
顾名思义 ， 它 就 是 一 个 后 端的 存储 空间 ， 它 的 大 小 通常 就 是 网 页 可 视 
区 域 的 大 小 ， 该 空间 存储 的 数据 就 是 页 面 的 显示 结果 。BackingStore 类 


的 作用 很 明显 ， 第 一 ， 它 保存 当前 的 可 视 结果 ， 所 以 Renderer 进 程 的 
绘制 工作 不 会 影响 该 网 页 结果 的 显示 ; 第 二 ，WebKit 只 需要 绘制 网 页 
的 变动 部 分 ， 因 为 其 余 的 部 分 保存 在 该 后 端 存储 空间 ，Chromium 只 需 
要 将 网 页 的 变动 更 新 到 该 后 端 存 储 中 即 可 。 


最 后 来 看 看 这 两 个 进程 是 如 何 传递 信息 和 绘制 内 容 的 。 两 个 进程 
传递 绘制 结果 是 通过 TransportDIB 类 来 完成 ， 该 类 在 Linux 系 统 下 其 实 
是 一 个 共享 内 存 的 实现 。 对 Renderer 进 程 来 说 ，Skia Canvas 把 内 容 绘 
制 到 位 图 中 ， 该 位 图 的 后 端 即 是 共享 的 CPU 内 存 。 当 Browser 进 程 接收 
到 Renderer 进 程 关 于 绘制 完成 的 通知 消息 ，Browser 进 程 会 把 共享 内 存 
的 内 容 复制 到 BackingStore 对 象 中 ， 然 后 释放 共享 内 存 。 


Browser 进 程 中 的 后 端 存 储 最 后 会 被 绘制 在 显示 窗口 中 ， 用 户 就 能 
够 看 到 网 页 的 结果 。 图 7-13 显 示 的 是 软件 泻 染 的 架构 图 ， 其 思想 主要 
来 源 于 Chromium 的 官方 网 站 ， 但 这 里 做 了 一 些 扩充 。 


7-13 Chromium 的 多 进程 软件 泻 染 结构 


根据 上 面 的 组 成 部 分 ， 一 个 多 进程 软件 泻 染 过 程 大 致 是 这 样 的 : 
RenderWidget 类 接收 到 更 新 请 求 时 ，Chromium 创 建 一 个 共享 内 存 区 
域 。 然 后 Chromium 创 建 Skia 的 SkCanvas 对 象 ， 并 且 RenderWidget 会 把 
实际 绘制 的 工作 派发 给 RenderObject 树 。 具 体 来 讲 ，WebKit 负 责 遍 历 
RenderObject 树 ， 每 个 RenderObject 节 点 根据 需要 来 绘制 自己 和 子女 的 


内 容 并 存储 到 目标 存储 空间 ， 也 就 是 SkCanvas 对 象 所 对 应 的 共享 内 存 
的 位 图 中 。 最 后 ，RenderWidgetHost 类 把 位 图 复制 到 BackingStore 对 象 
的 相应 区 域 中 ， 并 调用 “Paint” 函 数 来 把 结果 绘制 到 窗口 中 。 


后 面 我 们 会 介绍 在 哪些 时 候 请 求 绘制 网 页 内 容 ， 这 里 先 了 解 两 种 
会 触发 重新 绘制 网 页 中 某 些 区 域 的 请 求 ， 如 下 面 所 示 。 


前 端 请 求 : 该 类 型 的 请 求 从 Browser 进 程 发 起 的 请 求 ， 可 能 是 浏 
览 器 自身 的 一 些 需 求 ， 也 有 可 能 是 X 窗 口 系统 (或 者 其 他 窗口 系 
统 ) 的 请 求 。 一 个 典型 的 例子 就 是 用 户 因 操作 网 页 引起 的 变化 。 
后 端 请 求 : 由 于 页 面 自身 的 逻辑 而 发 起 更 新 部 分 区 域 的 请 求 ， 例 
如 HTML 元 素 或 者 样式 的 改变 、 动 画 等 。 一 个 典型 的 例子 是 
JavaScript 代 码 每 隔 50ms 便 会 更 新 网 页 样式 ， 这 时 样式 更 新 会 触发 
部 分 区 域 的 重 绘 。 


下 面 逼 八 来 解释 一 下 当 有 绘制 或 者 更 新 某 个 区 域 的 请 求 时 ， 
Chromium 和 WebKit 是 如 何 来 处 理 这 些 请 求 的 。 有 具体 过 程 如 图 7-14 所 
示 ， 下 面 是 其 中 主要 的 步骤 。 
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图 7-14 Chromium 的 软件 泻 染 过 程 


.Renderer 进 程 的 消息 循环 (Message Loop) 调用 处 理 “* 界 面 失效 ”的 
回调 函数 ， 该 函数 主要 调用 RenderWidget::DoDeferredUpdate 来 完 
成 绘制 请 求 。 

. RenderWidget::DoDeferredUpdate K 2X Ei 7c Val FA Layout K 2X SK ft AZ 
检查 是 否 有 需要 重新 计算 的 布局 和 更 新 请 求 。 

. RenderWidget 类 调用 TransportDIB 类 来 创建 共享 内 存 ， 内 存 大 小 为 
绘制 区 域 的 高 x 宽 x4， 同 时 调用 Skia 图 形 库 来 创建 一 个 SkCanvas 对 
象 。SKCanvas 对 象 的 绘制 目标 是 一 个 使 用 共享 内 存 存储 的 位 图 。 

. 当 泻 染 该 页 面 的 全 部 或 者 部 分 时 ，ScrollView 类 请 求 按 照 从 前 到 后 
的 顺序 遍历 并 绘制 所 有 RenderLayer 对 象 的 内 容 到 目标 的 位 图 中 。 
Webkit 绘 制 每 个 RenderLayer 对象 通过 以 下 步骤 来 完成 : 首先 
Webkit 计 算 重 绘 的 区 域 是 否 和 RenderLayer 对 象 有 重 到 ， 如 果 有 ， 


Webkit 要 求 绘制 该 层 中 的 所 有 RenderObject 对 象 。 图 7-14 中 省 略 了 
该 部 分 的 具体 内 容 ， 详 情 请 参考 代码 。 

绘制 完成 后 ，Renderer 进 程 发 送 UpdateRect 的 消息 给 Browser 进 
程 ，Renderer 进 程 同 时 返回 以 完成 泻 染 的 过 程 。Browser 进 程 接收 
到 消息 后 首先 由 BackingStoreManager 类 来 获取 或 者 创建 
BackingStoreX 对 象 (在 Linux 平 台 上 ) ，BackingStoreX 对 象 的 大 
小 与 可 视 区 域 相同 ， 包 含 整 个 网 页 的 坐标 信息 ， 它 根据 
UpdateRect 的 更 新 区 域 的 位 置信 息 将 共享 内 存 的 内 容 绘 制 到 自己 
的 对 应 存储 区 域 中 。 


gi 


最 后 Browser 进 程 将 UpdateRect 的 回复 消息 发 送 到 Renderer 进 程 ， 
这 是 因为 Renderer 进 程 知 道 Browser 进 程 已 经 使 用 完 该 共享 内 存 ， 可 以 
进行 回收 利用 等 操作 ， 这 样 就 完成 了 整个 过 程 。 


细心 的 读者 其 实 可 以 发 现 ， 这 一 过 程 需要 一 些 内 存 方面 的 拷贝 ， 
这 是 因为 网 页 的 泻 染 和 网 页 的 显示 是 在 两 个 不 同 的 进程 ， 而 这 些 拷 贝 
在 下 一 章 介绍 的 硬件 加 速 泻 染 机 制 中 可 以 避免 。 当 然 ， 硬 件 加 速 泻 染 
机 制 也 引入 一 些 其 他 方面 的 问题 。 


7.4.3 ”实践 : 软件 泻 染 过 程 


为 了 直接 理解 Chromium 的 多 进程 软件 泻 染 过 程 ， 本 节 中 笔者 使 用 
Chromium 项 目 提 供 的 “about:tracing” 工 具 来 分 析 ， 该 工具 可 以 收集 
Chromium 内 部 函数 调用 的 时 间 分 布 等 信息 。 有 具体 步骤 如 下 。 


1. 使 用 Chrome 浏 览 器 打开 标签 页 输入 “chrome://flags”， 找 到 选项 “对 
所 有 网 页 执行 GPU 合 成 Mac, Windows, Linux”， 选 择 “ 停 用 ”， 这 样 


确保 使 用 了 软件 泻 染 机 制 。 

2. 打开 网 页 http:/www.chromium.org/developers/design-documents , 
并 打开 一 个 新 的 标签 页 ， 输 入 “chrome://tracing”o 

3. 在 标签 页 “chrome://tracing” 中 单 击 “record” 按 钮 并 切换 到 第 二 步 打 
开 的 网 页 “Design Document”， 重 新 加 载 该 网 页 ， 之 后 再 切换 到 
“chrome://tracing” 标 签 页 中 ， 单 击 “stop tracing” 按 钮 ， 这 样 数据 收 
集 完毕 ， 读 者 会 发 现 有 很 多 如 图 7-15 中 下 面 的 图 层 所 示 的 信息 ， 
它们 表示 的 是 浏览 器 的 各 个 进程 和 线程 的 信息 。 
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图 7-15 ”浏览 器 “chrome://tracing” 结 果 和 任务 管理 器 


4. 单 击 浏览 器 地 址 栏 最 右 侧 的 “设置 按钮， 选择 "工具 -> 任务 管理 
器 ”， 读 者 会 发 现 三 个 任务 《如 果 读 者 的 浏览 器 没有 安装 其 他 
Chrome 扩 展 或 者 启动 插件 等 ) ， 这 三 个 任务 分 别 是 网 页 “Design 


Documents” ( Renderer 进程 1) 、 标 签 页 “chrome://tracing” 


(Renderers# #22) 和 浏览 器 (Browser 进 程 ) 。 图 7-15 中 显示 的 任 

务 管理 器 ， 读 者 看 到 三 个 任务 的 进程 ID 同 “chrome://tracing” 中 一 
一 对 应 。 下 面 首先 分 析 进 程 2312。 

5. 在 进程 2312 中 ， 选 择 线程 “CrRendererMain”， 通 过 放大 数据 图 ， 
读者 可 以 看 到 图 7-16 所 示 的 信息 ， 这 是 Chromium 的 多 进程 模型 绘 
制 网 页 使 用 的 一 些 函 数 和 它们 消耗 的 时 间 ， 读 者 可 以 将 这 些 函 数 
同 图 7-14 中 的 Renderer 进 程 中 的 调用 过 程 作 对 比 。 


7-16 “Design Documents” 网 页 对 应 的 Renderer 进 程 


6. 在 进程 3660 中 ， 选 sheer tienen 在 Renderer 进 程 完成 
图 7-16 中 的 操作 之 后 ， 通 过 放大 数据 图 ， 读 者 可 以 看 到 如 图 7-17 
所 示 的 信息 ， en k 享 内 存 的 数据 并 把 数据 绘制 到 
BackingStore 对 象 中 ， 最 后 绘制 到 窗口 。 读 者 同样 可 以 将 这 些 国 数 
同 图 7-14 中 的 Browser 进 程 的 调用 过 程 作 对 比 。 
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7-17 “Design Documents” 网 页 对 应 的 Renderer 进 程 


至 此 ，WebKit 的 基础 部 分 已 介绍 完毕 。 通 
读者 应 该 可 以 对 网 页 的 基本 知识 和 基本 的 泻 染 过 程 有 了 一 些 了 解 。 同 
ee tn 
扩展 浏览 器 能 力 的 。 当 然 ，WebKit 的 能 力 远 不 止 这 些 ， 在 高 级 篇 中 会 
介绍 更 多 有 关 WebKit 的 高 级 技术 。 


前 面 的 分 析 和 介绍 ， 


过 月 
过 


(1) 就 是 每 个 RenderLayer 都 有 一 个 存储 空间 ， 实 际 上 不 会 这 样 ， 这 些 我 们 会 在 第 8 章 中 详 
细 探 讨 。 


(2) 当然 ， 现 在 越 来 越 多 的 浏览 器 也 使 用 硬件 泻 染 技 术 来 泻 染 它 们 ， 这 是 后 话 。 


(3) WebKit 的 软件 泻 染 过 程 是 在 Renderer 进 程 进行 的 ， 而 网 页 的 显示 是 在 Browser 进 程 中 
的 。 


第 8 章 ”硬件 加 速 机 制 


从 本 章 开始 进入 WebKit 高 级 技术 部 分 ， 这 部 分 介绍 更 为 复杂 和 新 
颖 的 技术 ， 包 括 硬件 加 速 机制 、JavaScript 引 警 内 部 原理 、 插 件 和 扩展 
机 制 、 多 媒体 技术 、 安 全 机 制 、 移 动 技术 、 调 试 技术 和 Web 平 台 。 


随 着 HTML5 中 不 断 加 入 图 形 和 多 媒体 方面 的 功能 ， 例 如 
Canvas2D、WebGL、CSS 3D 和 视频 等 ， 这 对 泻 染 引擎 使 用 图 形 库 的 
性 能 提出 了 很 高 的 要 求 。 在 WebKit 泻 染 基 础 之 上 ， 本 章 着 重 描述 
WebKit 为 了 支持 硬件 加 速 机 制 而 引入 了 哪些 内 部 结构 ， 以 及 Chromium 
如 何在 这 些 设施 上 实现 了 特殊 的 硬件 加 速 机 制 ， 这 些 机 制 的 引入 极 大 
地 提升 了 WebKit 引 擎 的 泻 染 性 能 。 


8.1 硬件 加 速 基础 
8.1.1 概念 


这 里 说 的 硬件 加 速 技 术 是 指使 用 GPU 的 硬件 能 力 来 帮助 泻 染 网 
页 ， 因 为 GPU 的 作用 主要 是 用 来 绘制 3D 图 形 并 且 性 能 特别 好 ， 这 是 它 
的 专长 所 在 ， 它 同 软 件 泻 染 有 很 多 不 同 的 地 方 ， 既 有 自己 的 优点 ， 当 
然 也 有 些 不 足 之 处 。 


对 于 GPU 绘图 而 言 ， 通 单 不 像 软 件 泻 染 那样 只 是 计算 其 中 更 新 的 
区 域 ， 一 旦 有 更 新 请 求 ， 如 果 没 有 分 层 ，5 引 擎 可 能 需要 重新 绘制 所 有 
的 区 域 ， 因 为 计算 更 新 部 分 对 GPU 来 说 可 能 耗费 更 多 的 时 间 。 当 网 页 
分 层 之 后 ， 部 分 区 域 的 更 新 可 能 只 在 网 页 的 一 层 或 者 几 层 ， 而 不 需要 


将 整个 网 页 都 重新 绘制 。 通 过 重新 绘制 网 页 的 一 个 或 者 几 个 层 ， 并 将 
它们 和 其 他 之 前 绘制 完 的 层 合成 起 来 ， 既 能 使 用 GPU 的 能 力 ， 又 能 够 
减少 重 绘 的 开销 。 


之 前 ， 笔 者 总 是 将 RenderLayer 对 象 和 最 终 显示 出 来 的 图 形 层次 一 
一 对 应 起 来 ， 也 就 是 每 个 RenderLayer 对 象 都 有 一 个 后 端 存储 与 其 对 
应 ， 这 样 有 很 多 好 处 ， 那 就 是 当 每 一 层 更 新 的 时 候 ，WebKit 只 需要 更 
新 RenderLayer 对 象 包 含 的 节点 即 可 。 所 以 当 某 一 层 有 任何 更 新 时 候 ， 
WebKit 重 绘 该 层 的 所 有 内 容 (当然 对 于 Tiledlayer 不 是 这 样 的 情况 ) 。 
这 是 理想 情况 ， 在 现实 中 不 一 定 会 这 样 ， 主 要 原因 是 实际 中 的 硬件 能 
力 和 资源 有 有限。 为 了 节省 GPU 的 内 存 资源 ， 硬 件 加 速 机 制 在 
RenderLayer 树 建立 之 后 需要 做 三 件 事情 来 完成 网 页 的 泻 染 。 


。 WebKit 决 定 将 哪些 RenderLayer 对 象 组 合 在 一 起 ， 形 成 一 个 有 后 端 
存储 的 新 层 ， 这 一 新 层 不 久 后 会 用 于 之 后 的 合成 
(Compositing) ， 这 里 称 之 为 合成 层 (Compositing Layer) 。 每 
个 新 层 都 有 一 个 或 者 多 个 后 端 存储 ， 这 里 的 后 端 存 储 可 能 是 GPU 
的 内 存 。 对 于 一 个 RenderLayer 对 象 ， 如 果 它 没有 后 端 存储 的 新 
层 ， 那 么 就 使 用 它 的 父亲 所 使 用 的 合成 层 。 

将 每 个 合成 层 包含 的 这 些 RenderLayer 内 容 绘 制 在 合成 层 的 后 端 存 
储 中 ， 如 第 7 章 所 述 ， 这 里 的 绘制 可 以 是 软件 绘制 也 可 以 是 硬件 绘 
制 。 

由 合成 器 (Compositor) 将 多 个 合成 层 合成 起 来 ， 形 成 网 页 的 最 
终 可 视 化 结果 ， 实 际 就 是 一 张 图 片 。 合 成 器 是 一 种 能 够 将 多 个 合 
成 层 按 照 这 些 层 的 前 后 顺序 、 合 成 层 的 3D 变 形 等 设置 而 合成 一 个 
图 像 结果 的 设施 ， 后 面 会 介绍 Chromium 合 成 器 的 工作 原理 。 


在 WebKit 中 ， 只 有 把 编译 的 CC 代码 安 (macro ) 
“ACCELERATED_COMPOSITING” 打 开 之 后 ， 硬 件 加 速 机 制 才 会 被 开 
启 ， 有 关 硬 件 加 速 的 基础 设施 才 会 被 编译 进去 。 


8.1.2 ”WebKit 硬件 加 速 设施 


一 个 RenderLayer 对 象 如 果 需 要 后 端 存储 ， 它 会 创建 一 个 
RenderLayerBacking 对 象 ， 该 对 象 负责 Renderlayer 对 象 所 需要 的 各 种 存 
储 。 正 如 前 面 所 述 ， 理 想 情 况 下 ， 每 个 RenderLayer 都 可 以 创建 自己 的 
后 端 存 储 ， 但 事实 上 不 是 所 有 RenderLayer 都 有 自己 的 
RenderLayerBacking 对 象 。 如 果 一 个 RenderLayer 对 象 被 WebKit 依 照 一 
定 的 规则 创建 了 后 端 存储 ， 那 么 该 RenderLayer 被 称 为 合成 层 。 


每 个 合成 层 都 有 一 个 RenderLayerBacking ，RenderLayerBacking 负 
责 管 理 RenderLayer 所 需要 的 所 有 后 端 人 存储 ， 因 为 后 端 存 储 可 能 需要 多 
个 存储 空间 。 在 WebKit 中 ， 存 储 空间 使 用 GraphicsLayer 类 来 表示 ， 
8-1 描 述 了 这 些 主 要 类 和 它们 的 关系 。 


WebCore 


GraphicsLayerChromium GraphicsLayerCA WebKit 移植 


| | | 相关 类 


图 8-1 WebKit 的 硬件 加 速 基 础 类 


图 8-1 中 的 上 半 部 分 是 WebKit 项 目 中 WebCore 部 分 的 四 个 基础 类 ， 
RenderLayer 和 RenderLayerBacking 已 经 做 过 一 些 介 绍 了 ， 
GraphicsLayer 表 示 RenderLayer 中 前 景 层 、 背 景 层 所 需要 的 一 个 后 端 存 
储 。 每 个 GraphicsLayer 都 使 用 一 个 GraphicsLayerClient 对 象 ， 该 对 象 能 
够 收 到 GraphicsLayer 的 一 些 状 态 更 新 信息 ， 并 且 包 含 一 个 绘制 该 
GraphicsLayer 对 象 的 方法 ，RenderLayerBacking 继 承 于 该 类 。 
GraphicsLayer 是 WebKit 中 的 基础 类 ， 主 要 定义 一 套 标准 接口 ， 在 
WebKit 不 同 的 移植 中 ， 它 们 有 不 同 的 子 类 及 其 实现 ， 图 8-1 的 下 半 部 分 
是 两 个 不 同 移植 的 具体 实现 类 。 


哪些 RenderLayer 对 象 可 以 是 合成 层 呢 ? 如 果 一 个 RenderLayer 对 象 
具有 以 下 的 特征 之 一 ， 那么 它 就 是 合成 层 。 


。 RenderLayer 具 有 CSS 3D 属 性 或 者 CSS 透 视 效果 。 

。 RenderLayer 包 含 的 RenderObject 节 点 表示 的 是 使 用 硬件 加 速 的 视 
频 解码 技术 的 HTML5“video” 元 素 。 

RenderLayer 包 含 的 RenderObject 节 点 表示 的 是 使 用 硬件 加 速 的 
Canvas 2D 元 素 或 者 WebGL 技 术 。 

RenderLayer 使 用 了 CSS 透 明 效 果 的 动画 或 者 CSS 变 换 的 动画 。 
RenderLayer 使 用 了 硬件 加 速 的 CSS Filters 技 术 。 

RenderLayer 使 用 了 剪裁 (Clip) 或 者 反射 (Reflection) 属性 ， 并 
且 它 的 后 代 中 包括 一 个 合成 层 。 

RenderLayer 有 一 个 ZZ 坐标 比 自己 小 的 兄弟 节点 ， 且 该 节 扣 是 一 个 
合成 层 。 


至 于 为 什么 这 么 做 ， 有 以 下 三 个 原因 : 首先 当然 是 合并 一 些 
RenderLayer 层 ， 这 样 可 以 减少 内 存 的 使 用 量 ; 其 二 是 在 合并 之 后 ， 尽 
量 减少 合并 带 来 的 重 绘 性 能 和 处 理 上 的 困难 ;其 三 对 于 那些 使 用 单独 


层 能 够 显著 提升 性 能 的 RenderLayer 对 象 ， 可 以 继续 使 用 这 些 好 处 ， 例 
如 使 用 webGL 技 术 的 canvas 元 素 。 


8-2 fH XÑ 了 RenderLayer 树 、 RenderLayerBacking 对 象 和 
GraphicsLayer 树 这 些 硬 件 加 速 基础 设施 的 对 应 关系 。RenderLayer 树 中 
的 第 四 个 节点 没有 创建 RenderLayerBacking 对 象 ， 因 为 不 符合 上 面 的 
创建 条 件 ， 而 对 于 每 个 RenderLayerBacking 对 象 ， 它 也 至 少 需 要 一 个 
GraphicsLayer 对 象 ， 当 然 也 可 能 需要 多 个 ， 图 中 的 RenderLayerBacking 
对 象 分 别 需 要 2 个 、1 个 和 4 个 GraphicsLayer 对 象 ， 这 些 对 象 分 别 表示 什 
么 呢 ? 图 8-3 描 述 了 一 个 RenderLayerBacking 对 象 可 能 包括 的 众多 
GraphicsLayer 对 象 层 ， 它 们 表示 不 同 的 含义 。 


RenderLayer 树 RenderLayerBacking 对 象 GraphicsLayer 对 和 象 


图 8-2 ”RenderLayer 树 、RenderLayerBacking 对 象 和 GraphicsLayer 树 


RenderLayerBacking 


-m_graphicsLayer 

-m_ancestorClippingLayer 
-m_contentsContainmentLayer 

-m_foregroundLayer 

-m_backgroundLayer 

-m_childContainmentLayer 了 女 容器 层 


-m_maskLayer 

-m_layerForHorizontalScrollbar 水 平 深 动 条 
-m_layerForVerticalScrollbar 

-m_layerForScrollCorner 滚动 边 角 层 
-m_scrollingLayer 

-m_scrollingContentsLayer 滚动 内 容 层 


图 8-3 ”RenderLayerBacking 包 含 的 各 种 GraphicsLayer 对 象 层 


为 什么 一 个 RenderLayerBacking 对 象 需 人 呢 ? 原因 有 很 

多 ， 例 如 webKit 需 要 将 滚动 条 独立 开 来 称 为 一 个 层 ， 需 要 两 个 容器 层 

one T ae 

滚动 的 内 容 建 立新 层 ， 还 可 能 需要 剪裁 层 和 反射 层 。 那 么 这 些 层 

是 如 何 被 组 织 并 且 它们 被 绘制 的 顺序 是 如 何 呢 ? 图 8-4 中 中 的 树 状 结 

构 摘 述 了 所 有 层 的 绘制 顺序 ， 按 照 先 根 顺 序 蜗 历 的 结果 即 是 绘制 顺 

序 ， 图 中 每 个 层 就 是 一 个 GraphicsLayer WR. WFR 

RenderLayerBacking 对 象 来 说 ， 其 主 层 是 肯定 存在 的 ， 其 他 层 则 不 一 
定 存在 ， 因 为 不 是 每 个 RenderLayer 对 象 都 需要 用 到 它们 。 


滚动 容器 层 


Z 坐标 为 负数 子女 层 条 景 层 “ 女 层 Z 坐标 为 正 数 子女 层 


图 8-4 RenderLayerBacking 中 包含 的 GraphicsLayer 对 象 


管理 这 些 合成 层 等 工作 的 是 RenderLayerCompositor 类 ， 这 个 类 可 
以 说 是 个 “大 管家 *。 它 不 仅 计 算 和 决定 哪些 RenderLayer 对 象 是 合成 
层 ， 而 且 为 合成 层 创建 GraphicsLayer 对 象 ， 如 图 8-5 所 示 。 每 个 
RenderView 对 象 包含 一 个 RenderLayerCompositor， 这 些 对 象 仅 在 硬件 
加 速 机 制 下 才 会 被 创建 。RenderLayerCompositor 类 本 身 也 类 似 于 一 个 
RenderLayerBacking 类 ， 也 就 是 说 它 也 包含 一 些 GraphicsLayer 对 象 ， 这 
些 对 象 对 应 的 是 整个 网 页 所 需要 的 后 端 存 储 。 


GraphicsLayerClient 
/\ 


RenderLayerCompositor 


-m_compositor -m_scrollLayer 
-m_layerF orHorizontalScrollbar 
-m_clipLayer 
-m_overflowControlsHostLayer 
-m_layerForVerticalScrollbar 
-m_layerForScrollCorner 


+enclosingNonStackingClippingLayer() 
+requiresOwnBackingStore() 


图 8-5 RenderLayerCompositor38 


8.1.3 ”硬件 泻 染 过 程 


介绍 完 硬 件 加 速 机 制 所 使 用 的 内 部 设施 之 后 ， 同 前 面 介绍 的 软件 
泻 染 机 制 一 样 ， 下 面 详细 分 析 人 硬件 泻 染 机 制 过 程 。 泻 染 的 一 般 过 程 ， 
在 本 章 最 开始 的 时 候 已 经 描述 过 ， 这 里 主要 介绍 WebKit 是 如 何 具体 实 
现 这 一 过 程 的 。 


示例 代码 8-1 给 出 了 一 个 网 页 ， 该 网 页 中 使 用 了 很 多 HITML5 新 功 
能 ， 它 必须 使 用 硬件 加 速 机 制 才 能 够 泻 染 ， 因 为 这 其 中 的 CSS 3D 变 
形 、WebGL 和 Video 等 都 是 HTML53 引 入 的 新 特性 ， 这 些 新 特性 必须 依 
赖 GPU 硬 件 加 速 才 能 达到 比较 好 的 效果 。 


示例 代码 8-1 需 要 硬件 加 速 机 制 的 HTML5 网 页 


<html> 
<style> 

div{ 
-webkit-transform:rotateY(10deg); 

} 

</style> 

<body> 

<p>test text</p> 

<div>css 3d transform</div> 

<canvas id="webgl"width="80"height="80"></canvas> 

<video width="400"height="300"controls="controls"> 
<source src="test.ogg"type="video/ogg"> 

</video> 

<script type="text/javascript"> 
var canvas=document.getElementById("webg1"); 
var gl=canvas.getContext("experimental-webgl1"); 
gl.clearColor(0.0, 1.0, 0.0, 1.0); 
gl.clear(gl.COLOR_BUFFER_BIT); 


</script> 


</body> 
</html> 


首先 看 WebKit 是 如 何 确 定 并 计算 合成 层 的 ， 图 8-6 描 述 了 WebKit 如 
何 决定 哪些 层 是 合成 层 并 为 它们 分 配 后 端 存储 的 过 程 。 图 中 主要 包含 
两 个 部 分 ， 都 是 RenderLayerCompositor 类 的 图 数 ， 一 是 检查 
RenderLayer 对 象 是 否 为 合成 层 ， 如 果 是 的 话 ， 为 它们 创建 后 端 存 储 对 
& RenderLayerBacking; 二 是 根据 重新 更 新 的 合成 层 来 更 改 合 成 层 
树 ， 并 修改 后 端 存储 对 象 的 一 个 设置 信息 。 


FrameView RenderView RenderLayerCompositor RenderLayer RenderLayerBacking 


1: compositor() 


| 

fh | 
l 

2: updateCompositingLayers 

T 


alll 2.1: computeCompositing Hequirements 


2.2: |updateBacking 
2.3: ensure Backing 


> mli 


I— _ 2.4: rebuildCompositingLayerTree 


| 
l 
| 
| 
1 
2.3.1: new RenderLayerBacking 
| 
| 
| 
| 
| 


2.5: update CqmpositedBounds 


Pri 


2.6: updateGra phicsLayerConfiguration 


2.7: updateGraphicsLayer Geometry 


rm Pn 


1 
I 
有 H 


图 8-6 ”WebKit 决 定 合 成 层 并 构建 合成 层 树 


除了 上 图 之 外 ， 当 RenderLayer 对 象 被 创建 时 ， 网 页 还 有 一 些 其 他 
情况 也 可 能 需要 创建 RenderLayerBacking 对 象 。 具 体 的 过 程 是 
RenderLayerModelObject::styleDidChanged() Ea 数 调 用 
RenderLayer::styleChanged() A 2X 3K fh 2 , YA JG WebKit 调用 
RenderLayerCompositor::updateLayerCompositingState() KI 数 为 


RenderLayerModelObject 对 象 所 在 的 RenderLayer 层 来 创建 后 端 存储 对 
象 。 


8-7 主 要 描述 的 是 WebKit 为 示例 代码 8-1 建 立 的 合成 层 和 合成 层 
相应 的 RenderLayerBacking 对 象 。 根 据 前 面 的 解释 ，WebKit 为 网 页 中 
的 5 个 DOM 节 点 创建 RenderLayer 对 象 ， 分 别 为 HTMLDocument 对 象 、 
HTMLHtmlElement 对 象 、HIMLDivElement 对 象 、HTMLCanvas 对 象 
和 HTMLVideo 对 象 。 但 是 ， 图 中 只 有 4 个 RenderLayerBacking 对 象 ， 这 
是 因为 HTMLHtmlElment 对 象 对 应 的 RenderLayer 没 有 自己 的 
RenderLayerBacking 对 象 ， 原 因 是 该 RenderLayer 对 象 不 满足 之 前 所 描 
述 的 规则 。 


RenderObject 树 RenderLayer 树 RenderLayerBacking 对 象 


RenderView 


RenderBlock 


0 NS 


/ 
RenderHTMLCanvas 


图 8-7 示例 代码 8-1 的 RenderLayer 树 和 RenderLayerBacking 对 象 


其 次 ，WebKit 需 要 遍历 和 绘制 每 一 个 合成 层 ， 也 就 是 每 个 合成 层 
可 能 有 一 个 或 者 多 个 RenderLayer 对 象 ， 这 可 能 包含 至 少 四 种 情形 ， 第 
一 种 情形 是 HTMLDocument 节 点 ，WebKit 绘 制 该 节点 所 在 的 合成 层 需 
要 遍历 两 个 RenderLayer 对 象 所 包含 的 子 树 ， 与 其 他 绘制 的 内 容 的 调用 
过 程 非常 相似 ， 该 合成 层 也 需要 一 个 用 于 2D 图 形 的 图 形 上 下 文 对 象 ， 


该 对 象 的 内 部 实现 由 各 个 移植 来 决定 ， 有 具体 的 2D 绘 图 在 后 面 介 绍 
层 的 调用 过 程 如 图 8-8 所 示 ， 该 过 程 同 软件 泻 染 非常 类 似 ， 只 是 递归 过 
程 稍微 不 同 。 


paintLayerContentsAndReflection() 


reflectionlayer()->paintLayer() 


paintLayerContents() 


图 8-8 ”绘制 HTMLDocument 对 应 的 RenderLayer 层 


在 软件 泻 染 过 程 中 ，paintLayer 孙 数 被 递归 调用 ， 也 就 是 从 
RenderLayer 根 节点 开始 ， 直 到 所 有 的 RenderLayer 对 和 象 都 被 亿 历 为 止 。 
在 硬件 加 速 机 制 中 ， 情 况 有 所 不 同 ， 这 是 因为 引入 了 合成 层 的 概念 ， 
每 个 RenderLayer 对 象 被 绘制 到 祖先 链 中 最 近 的 合成 层 。 示 例 代码 8-2 
是 webKit 中 RenderLayer::paintLayerO 图 数 的 条 件 判 断 部 分 的 代码 ， 用 
来 检查 是 否 在 父 节 点 所 在 的 后 端 存储 中 绘制 当前 节点 。 如 果 它 不 是 合 
成 层 ， 那 么 就 继续 绘制 该 层 ; 如 果 它 是 的 话 ， 那 么 就 直接 返回 。 在 之 
后 的 逻辑 中 ，WebKit 会 重新 为 每 一 个 合成 层 调用 绘制 操作 ， 每 个 合 
层 的 图 形 上 下 文 都 不 一 样 ， 这 点 不 像 软 件 泻 染 过 程 。 


示例 代码 8-2 WebKit 的 RenderLayer: :paintLayer() 国 数 的 条 件 判断 


RenderLayer: :paintLayer(){ 


if (isComposited())f{ 


if (context->updatingControlTints() | | 


(paintingInfo.paintBehavior& 


PaintBehaviorFlattenCompositingLayers) ) { 
paintFlags|=PaintLayerTemporaryClipRects; 
yelse if (!backing()->paintsIntoWindow( ) 
& & !backing()->paintsIntoCompositedAncestor( ) 
& & !shouldDoSoftwarePaint(this, paintFlags& 
PaintLayerPaintingReflection) ) { 
//If this RenderLayer should paint into its 
backing, that 
will be done via RenderLayerBacking: :paintIntoLayer(). 
return; 
} 
}else if (viewportConstrainedNotCompositedReason( )== 
NotCompositedForBoundsOutOfView) { 


return; 


第 二 种 情形 是 使 用 CSS 3D 变 形 的 合成 层 ， 这 在 本 章 8.3.3 节 中 介 
绍 。 第 三 种 情形 是 使 用 WebGL 技 术 的 Canvas 元 素 所 在 的 合成 层 ， 它 的 
绘制 是 由 JavaScript 操 作 来 完成 的 ， 并 且 使 用 了 3D 的 图 形 上 下 文 ， 后面 
会 在 8.3.1 节 中 介绍 。 第 四 种 情形 是 类 似 使 用 了 硬件 加 速 的 视频 元 素 所 
在 的 合成 层 ， 该 层 的 内 容 其 实 是 由 视频 解码 器 来 绘制 ， 而 后 通过 定时 
器 或 者 其 他 通知 机 制 来 告诉 WebKit 该 层 内 容 已 经 发 生变 化 ， 需 要 重新 
合成 ， 这 在 第 11 章 中 介绍 。 


最 后 一 个 步骤 是 渲染 引擎 将 所 有 绘制 完 的 合成 层 合成 起 来 ， 这 个 
是 由 WebKit 的 移植 来 完成 的 ， 在 本 章 的 8.2.3 小 节 中 将 做 详细 的 介绍 。 


8.1.4 3D 图 形 上 下 文 


WebKit 中 的 3D 图 形 上 下 文 主要 是 提供 一 组 抽象 接口 ， 这 组 接口 能 
够 提供 类 似 OpenGLES (使 用 GPU 硬 件 能 力 的 3D 图 形 应 用 编程 接口 ) 
的 功能 ， 其 主要 目的 当然 也 是 使 用 OpenGL 绘 制 3D 图 形 的 能 力 。 这 一 
层 抽象 能 够 将 WebKit 各 个 移植 的 不 同 部 分 隐藏 起 来 ，WebCore 只 是 使 
用 统一 的 抽象 接口 。 在 WebKit 中 ，3D 图 形 上 下 文 的 主要 用 途 是 
WebGL, = 然 启用 硬件 加 速 的 Canvas2D 等 HTML5 技 术 也 会 使 用 3D 图 
形 技术 ， 不 过 情况 有 些 不 同 。 


图 8-9 给 出 了 WebKit 的 GraphicsContext3D 类 ， 该 类 是 一 个 抽象 类 ， 
其 包含 的 接口 所 处 理 的 对 象 就 是 OpenGL 中 所 提供 的 能 力 ， 例 如 针对 纹 
理 、 着 色 器 、 纹 理 贴图 、 顶 点 等 GL 操作 ， 不 过 这 里 是 一 个 C++ 类 的 封 
装 而 已 。 


GraphicsContext3D 
; Graphics Context3DPrivate 
mpivae dS 
+platformGraphicsContext3D() 


+platformGraphicsContext3D() 

+activeTexture() l 
+texImage2DResourceSafe() | 

+attachShader() 


+bindBuffer() ie 


+teximage2D() 
+uniform1f() 


图 8-9 ”WebKit 的 3D 图 形 上 下 文 相关 类 


图 8-9 中 的 GraphicsContext3DPrivate 就 是 一 个 跟 WebKit 的 各 个 移植 
相关 的 类 ， 虽 然 在 各 个 移植 中 都 是 使 用 该 名 称 ， 但 是 每 个 移植 的 定义 
非常 不 同 ， 它 主要 是 针对 移植 的 不 同 来 实现 的 。 
PlatformGraphicsContext3D 类 是 WwWebCore 用 于 创建 Surface 等 对 象 的 参 
数 ， 所 以 其 名 字 是 一 致 的 ， 但 是 每 个 移植 的 定义 实际 上 不 一 样 。 


GraphicsContext3D 中 的 接口 有 三 种 类 型 ， 第 一 类 是 所 有 移植 共享 
实现 的 接口 ， 例 如 texImage2DResourceSafe; 第 二 类 是 一 些 移植 能 够 共 
享 实现 的 接口 ， 例 如 texImage2D， 它 们 可 以 直接 调用 OpenGL 或 者 
OpenGL ES 的 应 用 编程 接口 ; 第 三 类 则 是 跟 每 个 移植 具体 相关 ， 例 如 
platformGraphicsContext3Do 


这 些 跟 移植 相关 的 类 都 是 需要 每 个 移植 去 实现 的 ， 否 则 这 一 机 制 | 
不 能 工作 ， 下 面 的 部 分 就 是 Chromium 移 植 如 何 实现 这 些 部 分 并 包含 哪 
些 不 同 之 处 。 


8.2 Chromium 的 便 件 加 速 机 制 


8.2.1 GraphicsLayer 的 支持 


GraphicsLayer 对 象 是 对 一 个 泻 染 后 端 存 储 中 某 一 层 的 抽象 ， 同 众 
多 其 他 WebKit 所 定义 的 抽象 类 一 样 ， 在 WebKit 移 植 中 ， 它 还 需要 具体 
的 实现 类 来 支持 该 类 所 要 提供 的 功能 。 为 了 完成 这 一 功能 ，Chromium 
提供 了 更 为 复杂 的 设施 类 ， 这 一 节 主 要 介绍 从 GraphicsLayer 类 到 合成 
器 这 一 过 程 中 所 涉及 的 众多 内 部 结构 。 


8-10 描 述 了 从 WebCore 的 同 移植 无 关 的 GraphicsLayer， 到 
WebKit 的 Chromium 移 植 ， 再 训 Chromium 浏 览 器 所 设计 的 Chromium 合 
成 器 的 LayerImpl 类 这 一 过 程 。 读 者 可 以 看 到 ， 中 间 有 好 几 层 ， 原 因 在 
于 抽象 和 合成 机 制 的 复杂 性 ， 以 及 性 能 等 众多 方面 的 考虑 ， 下 面 从 上 
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图 8-10 “Chromium 对 GraphicsLayer 的 支持 


e GraphicsLayerChromium : GraphicsLayer 的 子 类 ， 实 现 了 
GraphicsLayer 需 要 的 一 个 功能 ， 并 且 加 入 了 Chromium 的 所 需 信 
息 。 

。WebLayer : WebKit 的 Chromium 移 植 的 抽象 接口 类 ， 它 被 
GraphicsLayerChromium 等 调用 ， 主 要 目的 是 将 Chromium 的 实际 
后 端 存 储 类 抽象 出 来 ， 以 便 WebCore 使 用 它们 。 

e WebLayerlmpl: WebLayer 类 的 实现 类 ， 具 体 作 用 是 将 合成 器 的 
层 能 力 暴 露出 来 ， 跟 Layer 类 一 一 对 应 。 


e Layer: 合成 器 的 层 表 示 类 ， 是 Chromium 合 成 器 的 接口 类 ， 用 于 
表示 合成 器 的 合成 层 ， 它 会 形成 一 棵 合成 树 。 

。Layerlmpl: 同 Layer 对 象 一 一 对 应 ， 是 实际 的 实现 类 ， 包 含 后 端 
存储 ， 可 能 跟 Layer 树 在 不 同 的 线程 ， 具 体 在 后 面 介绍 。 


由 上 面 的 介绍 可 以 看 出 ， 这 个 过 程 基本 上 就 是 各 种 类 的 映射 ， 从 
GraphicsLayer 类 到 LayerImpl 类 ， 目 的 是 将 WebKit 的 合成 层 映 射 到 合成 
器 中 的 合成 层 ， 合 成 器 最 终 合成 这 些 层 。 不 过 在 新 的 Blink 中 ， 图 中 
WebKit 的 Chromium 移 植 部 分 的 类 被 移 除 掉 了 ， 原 因 是 Blink 不 需要 多 
层次 的 接口 ， 因 为 Blink 仅 被 Chromium 所 用 。 合 成 过 程 在 合成 器 小 节 


中 介绍 。 


8.2.2 ”框架 


在 Chromium 中 ， 有 个 比较 特别 的 设计 ， 就 是 所 有 使 用 GPU 硬 件 加 
wR (也 就 是 调用 OpenGL 编 程 接 口 ) 的 操作 都 是 由 一 个 进程 ( 称 为 GPU 
进程 ) 负责 来 完成 的 ， 这 其 中 包括 使 用 GPU 硬件 来 进行 绘图 和 合成 。 
Chromium 是 多 进程 架构 ， 每 个 网 页 的 Renderer 进 程 都 是 将 之 前 介绍 的 
3D 绘 图 和 合成 操作 通过 IPC 传 递 给 GPU 进 程 ， 由 它 来 统一 调度 并 执 
行 。 在 Chrome 的 Android 版 本 中 ，GPU 进 程 并 不 存在 ，Chrome 是 将 
GPU 的 所 有 工作 放 在 Browser 进 程 中 的 一 个 线程 来 完成 ， 这 得 益 于 结构 
设计 的 灵活 性 。 但 是 本 质 上 ，GPU 进 程 和 GPU 线 程 并 无 太 大 区 别 。 


图 8-11 描 述 了 Chromium 的 多 进程 染 构 中 GPU 进 程 同 其 他 进程 之 间 
的 联系 ， 事 实 上 每 个 Renderer 进 程 都 依赖 GPU 进程 来 泻 染 网 页 ， 当 然 
Browser 进 程 也 会 同 GPU 进 程 进 行 通 信 ， 其 作用 是 创建 该 进程 并 提供 网 
页 泻 染 过 程 最 后 绘制 的 目标 存储 。 例 如 ， 在 Windows 和 Linux 上 它 是 一 


个 窗口 对 应 的 “Surface”， 在 Android 系 统 中 则 是 SurfaceView 对 应 的 后 端 
(实际 上 也 是 一 个 GPU 的 缓冲 区 ) 。 


图 8-11 Chromium 的 GPU 进程 


GPU 进程 也 被 使 用 在 其 他 用 途中 ， 例 如 后 面 介 绍 到 的 Pepper 插 
件 ， 该 机 制 由 Chromium 提 供 ， 并 且 提 供 了 绘制 3D 图 形 能 力 的 接口 给 
Pepper 插件 使 用 ， 这 里 同样 也 需要 GPU 进程 的 统一 管理 。 


在 介绍 完 GPU 进 程 之 后 ， 下 面 主 要 描述 WebKit 泻 染 引 擎 是 如 何 使 
用 GPU 来 泻 染 网 页 的 。 图 8-11 描 述 了 具体 的 调用 栈 。 根 据 前 面 的 介绍 
可 以 知道 ，WebKit 定 义 了 两 种 类 型 的 图 形 上 下 文 ， 它 们 都 可 以 使 用 
GPU 来 加 速 ， 加 速 机 制 最 后 都 是 调用 OpenGL/OpenGLES 库 。 不 过 , 在 
Chromium 中 ， 这 一 过 程 比较 复杂 。 


3D 和 2D 图 形 上 下 文 在 Chromium 中 分 别 对 应 Chromium 的 3D 图 形 上 
下 文 实现 和 Skia 男 布 (canvas)， 它 们 在 调用 (GL 操作 ) 之 后 会 被 转换 成 
IPC 消 息 传 给 GPU 进 程 ， 该 进程 中 的 解释 器 对 这 些 消息 进行 解释 后 ， 
调用 GL 函 数 指针 表 中 的 函数 ， 这 些 函 数 指针 是 从 GL 库 中 获取 的 ， 至 


于 为 什么 是 这 样 ， 原 因 是 这 样 更 灵活 。 对 于 Windows 来 说 ，3D 图 形 库 
是 D3D 而 不 是 OpenGL 接口 ，Chromium 的 做 法 是 通过 开源 项 目 
ANGLE， 使 用 D3D 来 封装 成 OpenGL 方式 的 接口 ， 这 样 ，Chromium 就 
可 以 从 ANGLE 提 供 的 接口 读 入 函数 地 址 ， 如 图 8-12 所 示 。 


3D ABE RX 2D 图 形 上 下 文 


Renderer 进程 


GPU 进程 
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8-12 Chromium 的 3D 图 形 上 下 文 和 2D 图 形 上 下 文 的 硬件 加 速 调 用 栈 


下 面 以 Chromium 的 3D 图 形 上 下 文 为 例 ， 详 细 说 明 它 的 调用 经 过 
哪些 Chromium 具 体 类 最 后 调用 操作 系统 的 3D 图 形 库 ， 图 8-13 描 述 了 中 
间 使 用 到 的 各 种 主要 类 。 


<<component>> a] 
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图 8-13 “Chromium 的 GPU 加 速 设施 类 


同 前 面 的 调用 栈 一 样 ， 图 中 也 是 分 成 Renderer 进 程 和 GPU 进程 ， 
首先 来 了 解 Renderer 进 程 的 主要 类 。 


e WebGraphicsContext3DCommandBufferlmpl : 继 7K B 
WebKit::WebGraphics-Context3D 类 ， 它 实际 上 是 WebKit 的 
Chromium 移 植 中 的 PlatformGraphics-Context3D 类 。 这 个 类 主要 转 
接 自 WebKit 的 调用 到 Chromium 的 具体 实现 ， 同 时 将 这 些 3D 图 形 
操作 调用 转换 成 GL 命令 (Command， 后 面 介 绍 ) ， 主 要 包括 一 个 
RenderGLContext 对 象 。 

。 RendererGLContext: Renderer 进 程 对 GLContext 的 一 个 封装 ， 包 
括 所 有 用 于 跟 GPU 进 程 交 互 的 类 ， 有 一 个 GLES2Implementation 对 
象 、 一 个 CommandBnufferProxy 对 象 和 一 个 GPUChannelHost 对 象 。 


GLES2Implementation: 该 类 模拟 OpenGL ES2 的 编程 接口 ， 但 
是 不 直接 调用 GLES2 的 实现 ， 而 是 将 这 些 调用 转换 成 特定 格式 的 
命令 存 入 CommandBuffer 中 。 

CommandBufferHelper: 该 类 是 一 个 辅助 类 ， 包 括 一 
CommandBuffer 代 理 类 和 一 个 共享 内 存 。 

CommandBufferProxy : CommandBuffer 的 一 个 代理 类 ， 实 现 
CommandBuffer 的 接口 ， 用 于 和 CommandBufferStub 之 间 的 通信 
GPUChannelHost: 用 于 传递 GL 命令 的 IPC 消 息 辅助 类 。 


接 下 来 自然 是 GPU 进 程 中 各 个 主要 类 的 依次 介绍 。 


GPUChannel: 用 于 接收 GL 命令 并 发 送 回 复 的 辅助 类 。 

GPUCommandBufferStub : CommandBufferBt#, #2 403K BF 

CommandBufferProxy 的 消息 ， 将 请 求 交 给 CommandBufferService 

处 理 。 

CommandBufferService: CommandBuffer 的 具体 实现 类 ， 但 其 实 

它 并 不 具体 解析 和 执行 这 些 命 令 ， 而 是 当 有 新 的 命令 到 达 时 ， 调 
用 注册 的 回调 遂 数 来 处 理 。 

GPUScheduler: 负责 调度 执行 Commandbuffer 的 命令 ， 它 会 检查 

该 Commandbuffer 是 否 应 该 被 执行 ， 并 适时 将 命令 交 给 

CommandParser 来 处 理 。 

CommandParser: 仪 检查 CommandBuffer 中 的 命令 头 部 ， 其 余音 

分 则 交 给 具体 的 命令 解码 器 来 解释 ， 所 以 它 同 GL 命令 的 理解 是 独 

WN 

GLES2Decoderlmpl: 针对 GLES 命 令 的 命令 解释 器 ， 它 解析 每 条 

具体 的 命令 并 执行 调用 GL 相 应 的 函数 。 


e GL Implementation Wrapper: 一 组 GL 相 天 的 函数 指针 ， 通 过 设 
定 的 3D 图 形 库 来 读 取 库 中 相应 水 数 的 地 址 。 

GL Libraries: 具体 的 函数 库 ， 在 Chromium 中 ， 它 可 以 设置 为 
OpenGL, OpenGL ES, Mesa GL、Mock、ANGLE 等 ， 得 益 于 设 
计 上 的 灵活 性 ， 不 同 的 3D 图 形 库 都 可 以 被 Chromium 所 使 用 而 不 
需要 修改 任何 代码 。 


通过 上 面 每 个 模块 类 的 具体 介绍 ， 相 信 读 者 大 概 已 经 知道 
Chromium 跨 进程 的 硬件 加 速 机 制 的 工作 过 程 了 。 那 么 ，GPU 进 程 和 
Renderer 进 程 是 如 何 同 步 这 些 命 令 的 呢 ? 的 答案 是 ，GPU 进 程 处 理 一 
些 命令 后 ， 会 向 Renderer 进 程 报告 自己 当前 的 状态 ，Renderer 进 程 通过 
仿 查 状态 信息 和 自己 的 期 望 结果 来 确定 是 否 满 足 自己 的 条 件 。GPU 进 
程 最 终 绘制 的 结果 不 再 像 软件 泻 染 那样 通过 共享 内 存 传递 给 Browser 进 
程 ， 而 是 直接 将 页 面 的 内 容 绘制 在 浏览 器 的 标签 窗口 内 。 


8.2.3 ”命令 缓冲 区 


命令 缓冲 区 (Command Buffer) 主要 用 于 GPU 进程 〈 以 后 称 为 
GPU 服务 端 ) 和 GPU 的 调用 者 进程 〈 且 称 GPU 客 户 端 进程 ， 如 
Renderer 进 程 、Pepper 插 件 进 程 ) 传递 GL 操 作 命令 。 从 接口 上 来 讲 ， 
这 一 设计 只 提供 一 些 基 本 的 接口 来 管理 缓冲 区 ， 它 并 没有 对 缓冲 区 的 
具体 方式 和 命令 的 类 型 进行 任何 限制 ， 不 过 目前 Chromium 只 有 GLES 
一 种 实现 方式 。 


现 有 的 实现 是 基于 共享 内 存 的 方式 来 完成 的 ， 因 而 命令 是 基于 
GLES 编 码 成 特 


定 的 格式 存储 在 共享 内 存 中 .4 。 共 享 内 存 方 式 采 用 了 环形 缓冲 区 
(RingBuffer) 的 方式 来 管理 ， 这 表示 内 存 可 以 循环 使 用 ， 旧 的 命令 
会 被 新 的 命令 所 覆盖 。 


一 条 命令 可 以 被 分 成 两 个 部 分 : 命令 头 和 命令 体 。 命 令 头 是 
的 原 数据 信息 ， 包 含 两 个 部 分 : 一 个 是 命令 的 长 度 ， 一 个 是 命令 的 标 
识 。 命 令 体 包含 该 命令 所 需要 的 其 他 信息 ， 例 如 命令 的 立即 操作 数 。 
命令 是 可 以 固定 长 度 的 ， 也 可 以 是 变化 的 ， 一 切取 决 于 该 命令 。 具 体 
的 结构 如 图 8-14 所 示 。 


命令 头 命令 体 


图 8-14 ”命令 结构 


上 面 说 到 ， 命 令 缓冲 区 本 身 没有 定义 具体 的 命令 格式 ， 所 以 GLES 
实现 可 以 根据 自己 的 需要 来 定义 。GLES 实 现 所 使 用 的 命令 也 可 以 大 致 
分 成 两 类 : 第 一 类 是 基本 命令 ， 主 要 用 来 操作 桶 (Bucket) 、 跳 转 、 
调用 和 返回 等 指令 ; 第 二 类 是 跟 GLES2 的 函数 相关 的 命令 ， 主 要 用 来 
操作 GLES2 的 函数 。 


命令 本 身 是 保存 在 共享 内 存 中 的 ， 而 且 每 条 命令 的 长 度 不 能 超过 
(1<<21-1) 。 另 外 共享 内 存 的 大 小 也 是 固定 的 ， 如 果 命 令 太 长 ， 可 存 
储 的 命令 就 很 少 。 那 么 问题 就 出 来 了 ， 如 何 解决 需要 传输 较 大 数据 的 
命令 呢 ? 对 于 这 样 类 型 的 数据 ，Chromium 可 以 对 它们 使 用 独立 的 共享 
内 存 来 实现 ， 典 型 的 命令 例如 TexImage2D (传输 大 量 数据 到 GPU 内 


F) 。 但 是 ， 当 共享 内 存 大 小 超过 系统 的 限制 时 ， 这 种 方式 就 行 不 通 
了 。 Chromium 提 供 了 一 种 新 的 机 制 来 解决 这 个 问题 。 


这 个 机 制 就 是 桶 (Bucket) 机 制 。 解 决 问题 的 原理 是 : 通过 共享 
内 存 机 制 来 分 块 传输 ， 而 后 把 分 块 的 数据 保存 在 本 地 的 桶 内 ， 从 而 避 
免 了 申请 大 块 的 共享 内 存 。 前 面 提 到 的 公共 命令 就 是 用 来 处 理 桶 相关 
的 数据 。 当 数据 传输 完成 之 后 ， 对 该 数据 进行 操作 的 命令 就 可 以 执行 
了 。 桶 机 制 也 可 用 来 传输 字符 串 类 型 的 变 长 数据 : 接收 端 首先 获取 桶 
内 字符 捉 的 长 度 ， 然 后 通过 共享 内 存 的 方式 来 分 块 传输 ， 最 后 合并 在 
接收 端的 桶 内 。 


8.2.4 ”Chromium 合 成 器 (Chromium 
Compositor) 


8.2.4.1 架构 


合成 器 的 作用 就 是 将 多 个 合成 层 合成 并 输出 一 个 最 终 的 结果 ， 所 
以 它 的 输入 是 多 个 待 合成 的 合成 层 ， 每 个 层 都 有 一 些 属性 (如 3D 变 形 
=) 。 它 的 输出 就 是 一 个 后 端 存 储 ， 例 如 一 个 GPU 的 纹理 缓冲 区 。 


Chromium 合 成 器 是 一 个 独立 并 且 复 杂 的 模块 ， 顾 名 思 义 ， 它 的 作 
是 合成 网 页 划分 后 的 合成 层 ， 但 是 ， 这 里 的 合成 器 同 网 页 没有 必然 
的 绑 定 关系， 它 既 可 以 合成 网 页 ， 也 可 合成 用 户 界面 ， 或 者 多 个 标签 
页 。 其 实 ， 按 照 笔 者 的 理解 ， 如 果 你 的 项 目 中 需要 合成 器 ， 可 以 党 试 
移植 该 合成 器 为 自己 所 用 ， 当 然 ， 该 合成 器 有 一 些 依赖 天 系 需 要 解 
除 ， 难 度 也 很 大 ， 这 些 都 是 题 外 话 。 


在 架构 设计 上 ， 合 成 器 采用 的 是 表示 和 实现 分 离 的 原则 ， 也 就 是 
前 面 介 绍 合成 器 Layer 层 〈 同 GraphicsLayer 类 一 一 对 应 ) 同 具 体 合 成 器 
所 要 合成 的 操作 分 离 的 原则 ， 图 8-15 描 述 了 这 一 思想 。WebKit 对 合成 
层 的 各 种 设置 ， 最 后 都 使 用 Layer 树 来 表示 ， 每 个 Layer 节 点 包含 3D 变 
形 、 剪 裁 等 属性 ， 但 是 Chromium 将 这 些 属 性 应 用 到 后 端 存 储 并 合成 这 
一 过 程 并 不 是 在 Layer 树 中 进行 ， 而 是 将 这 些 功能 委托 LayerImpl 树 来 
完成 ， 两 者 之 间 通 过 代理 来 同步 ， 代 理 的 作用 是 协调 和 同步 两 者 之 间 
的 这 些 操作 。Layer 树 所 有 的 信息 都 会 拷贝 到 LayerImpl 树 中 。 


LayerImpl 树 


实现 部 分 的 线程 


图 8-15 合成 器 表示 和 实现 分 离 架 构 


图 8-15 中 描述 的 Layer 树 工作 在 主线 程 ， 实 际 指 的 是 泻 染 引擎 工作 
的 线程 ， 不 一 定 是 Renderer 进 程 的 主线 程 。 但 是 LayerImpl 树 都 是 工作 
在 “实现 部 分 ”的 线程 ， 实 现 部 分 的 线程 可 以 是 主线 程 也 可 以 是 单独 的 
一 个 线程 (Chromium Thread) ， 两 者 在 Chromium 中 目前 都 被 使 用 。 
实现 部 分 作为 单独 一 个 线程 是 在 Renderer 进 程 中 用 来 合成 网 页 的 ， 通 
常 也 称 为 合成 器 (Compositor) 线程 ， 后 者 也 称 为 线程 化 合成 

(Threaded Compositing) 。 在 Chrome 的 Android 版 本 ， 合 成 还 有 些 复 
杂 ， 网 页 的 合成 器 工作 在 Renderer 进 程 ， 同 时 还 有 另外 的 合成 器 工作 
在 Browser 进 程 ， 用 于 将 网 页 结果 和 浏览 器 用 户 界 面 合 成 起 来 。 


8.2.4.2 ”基础 设施 


为 了 支持 Chromium 合 成 器 的 线程 化 合成 和 线程 内 合成 等 众多 机 
制 ，Chromium 引 入 了 一 些 类 来 支持 它们 ， 下 面 结合 合 成 器 的 架构 来 逐 
步 分 析 它 们 。 首 先 来 看 合成 器 的 主要 组 成 ， 大 致 可 以 分 成 以 下 几 个 音 
分 。 


。 事件 处 理 部 分 。 主 要 是 接收 WebKit 或 者 其 他 的 用 户 事件 ， 例 如 网 
页 滚动 、 放 大 缩小 等 事件 ， 这 些 事件 会 请 求 合 成 器 重新 绘制 每 一 
个 合成 层 ， 然 后 合成 器 再 合成 这 些 层 的 绘制 结果 。 
合成 层 的 表示 和 实现 。 主 要 定义 各 种 类 型 的 合成 层 ， 包 括 它们 的 
is, ROS, Mase. 

合成 层 组 成 两 种 类 型 的 树 ， 以 及 它们 之 间 的 同步 等 机 制 。 

合成 调度 器 (Scheduler) 主要 调度 来 自用 户 的 请 求 ， 它 包括 一 
状态 用 于 调度 当前 队列 中 需要 执行 的 请 求 ， 目 的 当然 是 协调 合成 
层 的 绘制 和 合成 、 树 的 同步 等 操作 。 

合成 器 的 输出 结果 。 在 Chromium 合 成 器 中 ， 结 果 可 以 是 一 个 GPU 
Surface 或 者 是 一 个 CPU 的 存储 空间 〈 听 起 来 很 吃惊 ， 对 吧 ) 。 同 
时 ， 当 然 也 包括 GL 操作 类 可 以 让 合成 器 使 用 GL 来 合成 这 些 合成 
层 。 

各 种 后 端 存储 等 资源 。 合 成 器 需要 能 够 创建 各 种 类 型 的 GL 缓 冲 
区 、 纹 理 等 ， 因 为 每 个 合成 层 都 需要 这 些 资源 。 

支持 动画 和 3D 变 形 这 些 功 能 所 需要 的 基础 设施 。 


这 些 主要 部 分 构成 了 Chromium 合 成 器 ， 后 面 逐 一 介绍 它们 。 首 先 
看 两 种 树 ， 以 及 它们 之 间 是 如 何 同步 的 。 图 8-16 描 述 了 它们 使 用 到 的 
主要 类 。 


LayerTreeHost SingleThreadProxy 


-root_layer_ <> < -layer_tree_host_impl_ 
“proxy _ 
T Q 


ThreadProxy LayerTreeHostimpl 


Layerlmpl n:1 LayerTreelmpl 
-root_layer_ 


图 8-16 合成 器 的 线程 内 和 线程 化 合成 使 用 到 的 主要 设施 


先 看 Layer 树 所 在 的 线程 。 每 一 层 都 是 一 个 Layer 对 象 ， 而 Layer 树 
则 由 LayerTreeHost 类 来 维护 。LayerTreeHost 类 的 作用 一 是 根据 调用 者 
的 需求 创建 和 更 新 Layer 树 ， 另 外 就 是 将 这 些 变动 通过 代理 拷贝 给 实际 
的 实现 者 ， 也 就 是 LayerTreeImpl， 这 可 能 需要 跨 线程 ， 拷 贝 的 作用 就 
是 使 得 合成 器 能 够 不 依赖 于 WebKit 泻 染 所 在 的 线程 而 独立 工作 。 


代理 起 的 作用 很 重要 。 在 合成 器 中 ， 代 理 是 一 个 抽象 类 ， 定 义 了 
en 要 的 转 接 工 作 。 它 有 两 个 子 

， 分 别 是 SingleThreadProxy 类 和 ThreadProxy 类 ， 它 们 分 别 用 于 线程 
1 ae RR IS 1 oe AR BP LA ThreadProxy A fll (AAC ES 
ae) ， 代 理 的 一 些 接口 由 主线 程 调用 ， 也 就 是 由 LayerTreeHost 调 用 ， 
用 来 复制 信息 到 实现 类 LayerImpl。 另 外 的 就 是 使 用 调度 器 来 调度 合成 
的 过 程 。 


再 看 实现 部 分 。 实 现 的 主要 逻辑 由 LayerTreeHostImpl 来 负责 ， 如 
调度 、 复 制 信息 到 LayerImpl 树 等 ， 它 包含 至 少 一 个 LayerImpl 树 对 象 。 
在 线程 化 的 绘图 模式 中 ， 它 可 能 至 少 包 含有 三 个 树 。 而 LayerTreeImpl 


就 维护 一 个 LayerImpl 树 ， 包 括 为 树 中 的 层 创建 后 端 存 储 、 为 整个 树 创 
建 输出 结果 、 合 成 该 树 各 个 节点 的 实际 过 程 等 。 

类 Layer 和 LayerImpl 是 两 种 基 类 ， 它 们 各 自 都 有 多 个 子 类 ， 它 们 
和 它们 的 子 类 基本 上 是 一 一 对 应 的 ， 这 里 以 Layer 类 和 它 的 子 类 为 例 说 
明 合 成 器 中 的 合成 层 。 图 8-17 描 述 了 Layer 类 和 它 的 子 类 们 。 


NinePatchLayer VideoLayer DelegatedRendererLayer 


SolidColorLayer 


图 8-17 合成 器 中 的 Layer 类 和 它 的 子 类 们 


每 个 类 都 有 各 自 的 应 用 场景 ， 例 如 VideoLayer 类 是 表示 视频 播放 
的 ，SolidColorLayer 类 可 以 表示 单一 颜色 的 背景 层 ， 而 TextureLayer 类 
则 表示 该 合成 层 直 接 接收 一 个 纹理 ， 该 纹理 已 经 由 其 他 部 分 处 理 ， 不 
需要 合成 器 触发 任何 绘图 操作 。 在 Chromium 中 ， 一 些 插件 是 能 够 使 用 
硬件 绘图 并 输出 纹理 结果 的 。 


图 8-17 中 ， 有 两 个 类 被 标记 为 灰色 ， 其 一 是 Layer 类 ， 它 是 所 有 类 
的 基 类 ; 第 二 个 是 TiledLayer ， 这 个 类 是 一 个 中 间 类 ， 它 被 
ContentLayer 类 和 ImageLayer 类 继承 ， 它 的 含义 是 一 个 层 的 后 端 存 储 被 
分 割 成 瓦 片 状 (Tiles)， 由 多 个 小 后 端 存储 共同 存储 而 成 。 图 8-18 描 述 了 
一 个 合成 层 的 后 端 存 储 被 分 割 成 多 个 大 小 相同 的 瓦 片 状 的 小 存储 空 


间 ， 每 个 瓦 片 可 以 理解 为 OpenGL 中 的 一 个 纹理 对 象 ， 合 成 层 的 结果 被 
分 开 存 储 在 这 些 瓦 片 中 。 
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图 8-18 合成 层 的 瓦 片 化 


什么 样 的 合成 层 会 被 瓦 片 化 呢 ? TiledLayer 的 两 个 子 类 告诉 了 我 
们 ， 其 一 是 ContentLayer， 它 表示 合成 层 使 用 Skia 画 布 将 内 容 绘 制 到 结 
果 中 ， 对 应 到 网 页 中 就 是 常见 的 HTML 元 素 ， 例 如 DOM 树 中 的 html、 
div 等 所 在 的 层 ， 在 Chromium 中 ， 它 们 使 用 Skia 图 形 库 的 SkCanvas 类 来 
绘图 。 其 二 是 图 片 元 素 ， 如 果 一 个 合成 层 仅仅 包含 一 个 图 片 ， 那 么 该 
图 片 也 会 使 用 该 技术 。 


为 什么 使 用 瓦 片 化 的 后 端 存储 呢 ? 自然 是 因为 一 些 限制 或 者 好 处 
所 以 才 采 用 该 技术 ， 概 括 起 来 有 以 下 几 点 : 其 一 ，DOM 树 中 的 html 元 
素 所 在 的 层 可 能 会 比较 大 ， 因 为 网 页 的 高 度 很 大 ， 如 果 只 是 使 用 一 个 
后 端 存储 的 话 ， 那 么 需要 一 个 很 大 的 纹理 对 象 ， 但 是 实际 的 GPU 硬件 
可 能 只 支持 非常 有 限 的 纹理 大 小 ， 其 二 ， 在 一 个 比较 大 的 合成 层 中 ， 
能 只 是 其 中 一 部 分 发 生变 化 ， 根 据 之 前 的 介绍 ， 需 要 重新 绘制 整个 
层 ， 这 样 必然 产生 额外 的 开销 ， 使 用 瓦 片 化 的 后 端 存储 ， 就 只 需要 重 
绘 一 些 存在 更 新 的 瓦 片 ; 其 三 ， 当 层 发 生 滚动 的 时 候 ， 一 些 瓦 片 可 能 
不 再 需要 ， 然 后 WebKit 需 要 一 些 新 的 瓦 片 来 绘制 新 的 区 域 ， 这 些 大 小 
相同 的 后 端 存 储 很 容易 重复 利用 ， 可 以 做 到 非常 简洁 漂亮 。 


£| 


在 线程 内 合成 模式 下 ，Chromium 是 不 需要 调度 器 的 ， 仅 仅 在 线程 
化 的 合成 模式 下 Chromium 才 会 使 用 ， 所 以 调度 器 是 在 合成 器 线程 中 ， 
因而 不 能 访问 主线 程 中 的 资产。 调度 器 需要 考虑 整个 合成 器 系统 的 状 
态 ， 它 需要 考虑 何 时 更 新 树 、 何 时 绘图 、 何 时 运行 动画 、 何 时 上 传 内 
容 到 纹理 对 象 等 。 


合成 器 中 的 调度 器 和 状态 机 如 图 8-19 所 示 。 Scheduler 类 就 是 调度 
器 类 ， 任 何 合成 的 相关 操作 都 需要 设置 到 该 调度 器 中 ， 例 如 
ThreadProxy 类 会 调用 SetNeedsCommit 国 数 来 触发 Commit 操 作 ， 该 操 
作 的 含义 是 将 Layer 树 的 属性 等 改变 同步 到 LayerImpl 树 。 任 务 的 发 起 
者 只 是 告诉 调度 器 希望 执行 该 任务 ， 通 过 接口 设置 标记 ，Scheduler 类 
本 身 不 直接 处 理 这 些 状态 设置 ， 而 是 将 它 转 给 SchedulerStateMachine 类 
处 理 ， 该 状态 机 设置 相应 的 状态 位 。 一 个 任务 一 般 不 会 被 立即 执行 ， 
而 是 等 到 调度 器 调度 到 该 任务 的 时 候 才 会 执行 。 


SchedulerStateMachine 
+SetNeedsBeginFrameOnI|mp!IThread() +nextAction() 
+ScheduledActionSendBeginFrameToMainThread() +SetNeedsCommit() 
+ScheduledActionCommit() +SetNeedsRedraw() 
+ScheduledActionCheckForCompletedTileUploads() +SetHasPendingTree() 


Scheduler 
™ 

*、|-state_machine_ 
T-client_ 


+ProcessScheduledActions() 


ThreadProxy +SetNeedsCommit() 
+SetNeedsCommit() +SetNeedsRedraw() 
+SetNeedsCommitOnimplThread() +SetHasPendingTree() 


图 8-19 ”调度 器 类 和 状态 机 类 


当 调 用 Scheduler 类 的 ProcessScheduleActions 时 ， 调 度 器 会 通过 状 
态 机 获取 当前 需要 执行 的 任务 ， 状 态 机 根据 之 前 ore 的 各 种 信息 来 决 
定 下 面 的 任务 是 什么 。 一 旦 确定 了 任务 ， 调 度 器 通过 SchedulerClient 来 
执行 实际 的 任务 ，ThreadProxy 类 就 是 一 个 SchedulerClient 子 类 ， 它 会 
桥接 到 Layer 树 、LayerImpl 树 或 者 其 他 设施 。 


调度 器 Scheduler 的 基本 原则 是 一 切 请 求 都 是 设置 状态 机 中 的 状 
态 ， 这 些 请 求 什 么 时 候 被 执行 由 调度 器 来 决定 。 调 度 任 务 的 主要 函数 
是 ProcessScheduleActions， 它 的 工作 方式 如 图 8-20 所 示 。 原 理 不 是 很 
复杂 ， Re ie 由 状态 机 来 计算 和 决定 

下 一 个 要 执行 的 任务 。 前 面 描 述 过 ， 在 此 之 前 ， 任 务 的 发 起 者 是 设置 
这 些 状态 ， ee 而 不 是 立即 要 求 执行 。 状 
态 机 计算 出 下 一 个 任务 ， 调 度 器 获得 任务 的 类 型 并 执行 该 任务 ， 然 后 
再 接着 计算 下 一 个 任务 ， 如 此 循环 ， 直 到 空 内 为 止 。 
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SchedulerStateMachine::NextAction 


图 8-20 ”调度 器 调度 任务 


下 面 以 同步 Layer 树 到 LayerImpl 树 (commit) 为 例 说 明 任 务 的 调 
度 过 程 以 及 调度 器 在 这 一 过 程 中 的 作用 ， 图 8-21 描 述 了 “commit” 任 务 
的 调度 过 程 。 
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8-21 “commit” 任 务 的 调度 过 程 


首先 ， 当 Layer 树 有 变动 的 时 候 ， 它 需要 调用 
ThreadProxy::SetNeedsCommit， 这 些 任务 是 在 泻 染 线程 中 的 ， 随 后 它 


会 提交 一 个 请 求 到 “Compositor” 线 程 。 


其 次 ， 当 该 “Compositor ”线程 处 理 到 该 请 求 的 时 候 ， 它 会 通过 调 
度 器 的 SetNeedsCommit 国 数 设置 状态 机 的 状态 。 


FBR, AE 2S BY SetNeedsCommit & Wi FA ProcessSchedule Actions kk 
数 ， 它 检查 后 面 需 要 执行 的 任务 。 


然后 ， 如 果 没 有 其 他 任务 或 者 时 间 合 适 的 话 ， 状 态 机 决定 下 面 立 
刻 执行 该 任务 ， 它 调用 ThreadProxy 的 ScheduledActionCommit 了 加 数 ， 该 
函数 实际 执行 “commit” 任 务 需 要 的 具体 流程 。 


最 后 在 ScheduledActionCommit A % H , e 2 W R 
LayerTreeHostImpl 和 LayerTreeHost 中 的 相应 函数 来 完成 同步 两 个 树 的 
工作 。 同 步 结束 后 ， 它 需要 通知 泻 染 线程 ， 因 为 事实 上 这 一 过 程 需要 
阻止 该 线程 。 


8.2.4.3 “合成 过 程 


在 了 解 完 合成 器 的 各 个 主要 部 分 之 后 ， 下 面 来 看 看 合成 工作 是 如 
何 完成 的 。 根 据 之 前 描述 的 过 程 ， 合 成 工作 主要 有 四 个 步骤 ， 这 些 步 
又 都 是 由 调度 器 调度 ， 需 要 各 个 类 参与 来 共同 完成 。 


1. 创建 输出 结果 的 目标 对 象 *Surface”， 也 就 是 合成 结果 的 存储 空 
间 。 


2. 开始 一 个 新 的 帧 (Begin Frame) ， 包 括 计 算 滚 动 和 缩放 大 小 、 动 
画 计 算 、 重 新 计算 网 页 的 布局 、 绘 制 每 个 合成 层 等 。 

3. 将 Layer 树 中 包含 的 这 些 变动 同步 到 LayerImpl 树 中 ， 也 就 是 图 8-21 
所 说 的 “commit”* 任 务 的 调度 过 程 。 

4. 合成 LayerImpl 树 中 的 各 个 层 并 交换 前 后 帧 缓冲 区 ， 完 成 一 帧 的 绘 
制 和 显示 动作 。 


在 这 四 个 步骤 中 ， 步 又 1 只 是 在 最 开始 的 时 候 调用 ， 而 且 只 是 一 次 
性 的 动作 。 当 后 面 网 页 出 现 动画 或 者 JavaScript 代 码 修 改 CSS 样 式 和 
DOM 等 情况 的 时 候 ， 一 般 会 执行 后 面 三 个 步骤 ， 当 然 也 可 能 只 需要 步 


又 4。 
图 8-22 是 合成 器 工作 的 典型 过 程 ， 结 合 上 面 描述 的 四 个 步骤 ， 笔 


者 特地 将 它们 作 了 一 一 对 应 ， 图 中 已 经 做 下 了 标记 ， 下 面 依次 来 分 析 
这 四 个 步骤 。 
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图 8-22 合成 器 的 工作 过 程 


在 步骤 一 中 , “Compositor” 线 程 首 先 创建 合成 器 需要 的 输出 结果 
的 后 端 存 储 ， 在 调度 器 执行 该 任务 时 ， 该 线程 会 将 任务 交 给 主线 程 来 
完成 。 主 线程 会 创建 后 端 存 储 并 把 它 传 回 给 “Compositor” 线 程 。 


在 步骤 二 中 , “Compositor” 线 程 告诉 主线 程 需 要 开始 绘制 新 的 一 
帧 ， 同 样 是 通过 线程 间 通 信 来 传递 任务 。 主 线程 接收 到 该 任务 后 ， 需 
要 做 的 事情 非常 多 ， 读 者 可 以 看 到 从 4.1 到 4.6 步 骤 之 间 做 的 这 些 操作 ， 


实际 上 还 省 略 了 一 些 次 要 操作 。 这 里 面 主要 是 执行 动画 操作 、 重 新 计 
算 布 局 ， 以 及 绘制 需要 更 新 的 合成 层 等 。 在 这 之 后 主线 程 会 等 待 第 三 
个 步 又， 当 第 三 个 步骤 完成 后 ， 它 通知 主线 程 的 LayerHost 等 类 ， 这 是 
因为 步骤 三 需要 阻塞 主线 程 ， 需 要 同步 Layer 树 。 


在 步骤 三 中 ， 基 本 的 过 程 如 图 8-21 所 示 ， 这 里 不 再 痪 述 。 


在 步骤 四 中 ， 主 要 就 是 合成 工作 了 。 经 过 第 三 步 之 后 ， 
“compositor” 线 程 实际 上 已 经 不 再 需要 主线 程 的 参与 就 能 够 完成 合成 工 
作 了 ， 这 时 该 线程 有 了 合成 这 些 层 需要 的 一 切 资 产 。 图 中 调用 过 程 
5.1.1 到 5.1.6 这 些 子 步 骤 就 是 合成 各 个 层 并 交换 前 后 缓冲 区 ， 读 者 会 看 
到 这 些 并 不 需要 主线 程 的 参与 。 这 样 就 能 够 解释 泻 染 线程 在 做 其 他 事 
情 的 时 候 ， 网 页 滚动 等 操作 并 不 会 受到 泻 染 线程 的 影响 ， 因 为 这 时 候 
合成 器 的 工作 线程 仍然 能 够 正常 进行 ， 合 成 器 线程 继续 合成 当前 的 各 
个 合成 层 生 成 网 页 结果 ， 虽 然 此 时 可 能 有 些 内 容 没 有 更 新 ， 但 用 户 根 
本 感觉 不 到 网 页 被 阻塞 等 问题 ， 浏 览 网 页 的 用 户 体验 更 好 。 


Chromium 的 最 新 设计 为 了 合成 网 页 (网 页 中 也 可 以 包含 iframe 等 
ARWR) 和 浏览 器 的 用 户 界 面 (典型 的 是 在 Android 系 统 上 ， 但 是 在 
桌面 系统 上 ， 用 户 界面 通常 不 需要 同 网 页 内 容 合 成 ) 可 能 需要 多 个 合 
成 器 。 每 个 网 页 可 能 需要 一 个 合成 器 ， 网 页 中 的 iframe 也 需要 一 个 合 
成 器 ， 整 个 网 页 同 浏览 器 的 合成 也 需要 一 个 合成 器 ， 这 些 合成 器 构成 
一 个 层次 化 的 合成 器 结构 ， 如 图 8-23 所 示 。 图 中 的 根 合 成 器 是 浏览 
最 高 层 的 合成 器 ， 该 合成 器 负责 网 页 和 浏览 器 用 户 界面 的 合成 ， 它 有 
一 个 子女 就 是 “合成 器 2”"， 根 合成 器 会 将 “合成 器 2” 的 结果 同 用 户 界面 
合成 起 来 。“ 合 成 器 2” 就 是 网 页 的 合成 器 ， 而 它 也 包含 一 个 合成 iframe 
内 容 的 “合成 器 3” 子 合成 器 。 这 里 ,，“ 合 成 器 2” 和 “合成 器 3” 按 理 是 在 
Renderer 进 程 中 进行 的 ， 因 为 它们 是 网 页 相关 的 合成 ， 而 根 合 成 器 是 


在 Browser 进 程 中 的 ， 这 样 会 增加 内 存 带宽 的 使 用 。 目 前 Chromium 的 
设计 使 用 “mailbox” 机 制 将 Renderer 进 程 中 的 合成 器 结果 同步 到 Browser 
进程 ， 根 合成 器 可 以 使 用 这 些 结果 。 
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图 8-23 ”层次 化 合成 器 


8.2.5 XBR: 减少 重 绘 


网 页 加 载 后 ， 每 当 重 新 绘制 新 的 一 帧 的 时 候 ， 一 般 需 要 三 个 阶 
段 ， 也 就 是 前 面 说 的 计算 布局 、 绘 图 和 合成 三 个 阶段 。 如 果 想 减少 每 
一 帧 的 时 间 ， 提 高 性 能 多 ， 当 然 要 着 重 减少 这 三 个 阶段 的 时 间 。 


这 三 个 阶段 中 ， 计 算 布 局 和 绘图 比较 费时 间 ， 而 合成 需要 的 时 间 
相对 要 少 一 些 。 而 且 ， 当 布局 的 变化 越 多 ，WebKit 通 常 需要 越 多 的 绘 
图 时 间 。 例 如 当 使 用 JavaScript 的 计时 器 来 控制 动画 的 时 候 ，WebKit 可 
能 需要 修改 布局 和 比较 多 的 绘图 操作 ， 这 会 明显 增加 WebKit 绘 制 每 帧 


的 时 间 ， 是 否 有 什么 办 法 来 避免 这 一 情况 呢 ? 办 法 有 很 多 ， 这 里 介 
WebKit 两 种 典型 的 方法 ， 第 一 种 是 使 用 合适 的 网 页 分 层 技术 以 减少 
要 重新 计算 的 布局 和 绘图 ; 第 二 种 是 使 用 CSS 3D 变 形 和 动画 技术 。 


刀 
绍 
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首先 是 网 页 的 分 层 问 题 。 假 设 读者 需要 设计 一 款 游 戏 ， 例 如 闯关 
之 类 的 HTML5 网 页 游戏 。 游 戏 中 的 画面 可 能 有 背景 ， 背 景 之 前 是 各 种 
各 样 的 障碍 物 ， 人 物 就 是 要 闽 过 各 种 各 样 的 关卡 。 假 设 Web 开 发 者 希 
望 使 用 canvas 2D 技 术 来 实现 它 ， 并 且 假 设 开发 者 使 用 一 个 canvas 元 
素 ， 当 人 物 在 前 面 运动 的 时 候 ， 根 据 canvas 2D 的 特性 ，WebKit 需 要 将 
该 元 素 内 部 的 内 容 都 重新 绘制 一 遍 以 显示 人 物 的 一 个 工作 ， 这 样 的 做 
法 导致 WebKit 开 销 太 大 ， 因 为 WebKit 需 要 重新 绘制 整个 canvas 元 素 ， 
然后 再 使 用 合成 器 。 一 个 比较 好 的 做 法 是 ， 使 用 多 个 canvas 元 素 ， 将 
它们 按照 前 后 顺序 一 放 在 一 起 。 前 面 canvas 元 素 的 背景 为 透明 ， 这 样 
后 面 的 元 素 能 够 显示 出 来 。 每 一 个 canvas 元 素 都 是 一 个 合成 层 ， 每 一 
帧 的 变化 都 只 是 一 个 或 者 部 分 合成 层 ， 而 不 是 所 有 的 canvas 元 素 。 


以 前 面 的 游戏 继续 说 明 ，Web 开 发 者 可 以 使 用 一 个 canvas 元 素来 绘 
制 游戏 的 背景 ， 用 另外 第 二 个 canvas 元 素来 绘制 障碍 物 ， 用 第 三 个 
canvas 元 素来 绘制 炸弹 、 金 钱 等 ， 使 用 第 四 个 canvas 元 素来 绘制 人 物 。 
这 样 ， 当 人 物 不 动 的 时 候 ， 如 果 炸 弹 和 人 金钱 在 变化 ，WebKit 仅 需要 重 
新 绘制 第 三 个 元 素 。 当 人 物 走 动 的 时 候 ，WebKit 只 需要 重新 绘制 第 四 
个 元 素 。 与 此 同时 ， 第 一 个 和 第 二 个 元 素 则 仅 在 很 少 的 情况 下 会 被 
WebKit 重 新 绘制 ， 这 样 能 够 有 效 地 减少 开销 ， 图 8-24 描 述 了 这 一 概 
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图 8-24 ”使 用 多 个 canvas 元 素 分 层 示 意图 


当然 这 只 是 一 个 基本 的 思路 ， 也 就 是 说 ，Web 开 发 者 实际 上 可 以 
将 这 一 思想 应 用 在 很 多 其 他 的 场景 。 详 细 的 情况 请 读者 参阅 层次 化 
canvas 泻 染 优 化 技术 : http://www.ibm.com/developerworks/library/wa- 
canvashtml5layering/index.html， 该 文章 很 好 地 描述 了 这 一 思想 。 现 有 
的 一 些 设计 同样 可 以 将 这 些 思想 应 用 在 同一 个 canvas 元 素 内 部 以 获得 
较 好 的 性 能 ， 这 里 面 可 以 挖掘 的 地 方 还 很 多 。 


其 次 是 使 用 CSS 3D 变 形 技术 ， 它 能 够 让 浏览 器 仅仅 使 用 合成 器 来 
合成 所 有 的 层 就 可 以 达到 动画 效果 ， 而 不 是 通过 重新 设置 其 他 CSS 属 
性 并 触发 计算 布局 、 重 新 绘制 图 形 、 重 新 合成 所 有 层 这 一 非常 复杂 的 
过 程 。 实 际 上 ， 开 发 者 如 果 需 要 网 页 中 有 一 些 动画 或 者 特殊 效果 ， 可 
以 给 这 些 元 素 设置 3D 变 形 属性 ， 然 后 通过 CSS33 引 入 的 动画 能 力 ， 网 页 
就 可 以 达到 很 多 菲 夷 所 思 的 效果 。 更 重要 的 是 ，WebKit 不 需要 大 量 的 
布局 计算 ， 不 需要 重新 绘制 元 素 ， 只 需要 修改 合成 时 候 的 属性 即 可 。 
当 合 成 器 需要 合成 的 时 候 ， 每 个 合成 层 都 可 以 设置 自己 的 3D 变 形 属 
性 ， 这 些 属性 仅仅 改变 合成 层 的 变换 参数 ， 而 不 需要 布局 计算 和 绘图 
操作 ， 可 以 极 大 地 节省 时 间 。 图 8-25 显 示 的 是 famo.us 网 站 展示 的 效果 


和 使 用 Chrome 的 开发 者 工具 收集 的 性 能 分 析 结 果 数 据 ， 根 据 前 面 的 描 
述 来 解释 一 下 这 一 结果 。 


famo.us 


18-25 famo.us 网 站 展示 的 效果 和 性 能 分 析 结 果 


该 网 站 实际 上 显示 的 是 多 个 “div" 元 素 ， 每 个 元 素 就 是 元 素 周 期 表 
中 的 一 个 化 学 元 素 ， 每 个 元 素 都 设置 了 3D 的 效果 ， 它 们 有 各 式 各 样 的 
动画 效果 ， 非 常 吸引 人 。 更 奇特 的 是 ， 该 网 页 能 够 在 手机 和 平板 等 性 
能 较 弱 的 设备 上 达到 很 好 的 性 能 ， 为 什么 呢 ? 


在 这 里 ， 笔 者 通过 Chrome 的 开发 者 工具 为 读者 解 开 谜团。 该 工具 
能 为 开发 者 分 析出 Chrome 浏 览 器 为 计算 每 一 帧 所 花费 的 时 间 和 这 些 时 
间 的 分 布 情 况 。 在 计算 每 一 帧 的 时 候 JavaScript 代 码 首 先 设置 元 素 的 3D 
属性 ， 然 后 设置 样式 信息 ， 但 是 Chrome 浏 览 器 不 需要 重新 布局 ， 也 不 
需要 重新 绘图 ， 只 是 在 随后 使 用 合成 功能 ， 读 者 发 现 合 成 阶段 所 人 花费 


的 时 间 非 常 少 ， 几 乎 可 以 忽略 不 计 ， 这 使 得 计算 图 中 每 一 帧 都 相对 比 
较 省 时 间 ， 因 为 每 一 帧 的 生成 没有 了 费时 的 布局 计算 和 绘图 操作 。 


一 网 页 设计 给 大 家 带 来 的 启示 是 ， 尽 量 在 每 一 帧 中 减少 布局 和 
ae 它们 会 极 大 地 降低 生成 每 一 帧 的 性 能 ， 当 然 很 多 情况 下 
布局 计算 和 绘图 操作 是 不 可 避免 的 ， 所 以 开发 者 需要 合理 地 设计 网 
页 ， 和 希望 这 里 的 一 些 例子 能 够 给 大 家 带 去 更 多 的 思考 。 


8.3 ”其 他 人 硬件 加 速 模块 
8.3.1 2D 图 形 的 硬件 加 速 机 制 


其 实 网 页 中 有 很 多 绘图 操作 是 针对 2D 图 形 的 ， 这 些 操 作 包括 通常 
的 网 页 绘制 ， 例 如 绘制 边框 、 文 字 、 图 片 、 填 充 等 ， 它 们 都 是 典型 的 
2D 绘 图 操作 。 在 HTML5 中 ， 规 范 又 引入 了 2D 绘 图 的 画布 功能 ， 它 的 
作用 是 提供 2D 绘 图 的 JavaScript 接 口 ， 所 以 JavaScript 代 码 可 以 很 容易 
地 调用 该 接口 来 绘制 任意 的 2D 图 形 。2D 绘 图 本 身 是 使 用 2D 的 图 形 上 
下 文 ， 而 且 一 般 使 用 软件 方式 来 绘制 它们 ， 也 就 是 光栅 化 
(Rasterize) 的 方法 。 但 是 ， 其 实 这 些 2D 绘 图 操作 也 可 以 使 用 GPU 也 
就 是 3D 绘 图 来 完成 ， 这 里 把 使 用 GPU 来 绘制 2D 图 形 的 方法 称 为 2D 图 
形 的 硬件 加 速 机 制 。 


如 上 面 所 述 ， 目 前 2D 图 形 的 硬件 加 速 有 两 种 应 用 场景 ， 第 一 种 就 
是 网 页 基本 元 素 的 绘制 ， 针 对 的 层次 类 型 其 实在 前 面 描述 过 ， 也 就 是 
ContentLayer， 读 者 应 该 记得 它 的 后 端 是 一 个 2D 的 画布 对 象 ; 第 二 种 
就 是 HTML5 的 新 元 素 canvas， 用 来 绘制 2D 图 形 。 


8.3.1.1 2D 图 形 上 下 文 


第 7 章 中 介绍 了 WebKit 中 的 2D 图 形 上 下 文 ， 该 上 下 文 在 WebKit 的 
Chromium 移 植 中 需要 使 用 Skia 图 形 库 来 完成 2D 图 形 操 作 ， 图 8-26 描 述 
了 WebKit 的 Chromium 移 植 中 2D 图 形 上 下 文 的 实现 类 。 


GraphicsContext SkSurface 
1 
1 
| 


图 8-26 ”WebKit 的 Chromium 移 植 使 用 Skia 来 绘制 2D 图 形 


在 上 图 中 ， 对 于 WebKit 需 要 使 用 GraphicsContext 的 地 方 ， 
Chromium 会 创建 一 个 Skia 图 形 库 中 提供 的 SkCanvas 对 象 来 处 理 WebKit 
的 2D 图 形 操作 请 求 。 至 于 这 个 SkCanvas 对 象 是 使 用 软件 绘图 还 是 GPU 
绘图 ， 取 决 于 对 SkCanvas 对 象 的 设置 。SkCanvas 类 表示 的 是 一 个 男 
布 ，2D 的 图 形 操作 都 是 在 这 个 画布 上 处 理 ， 绘 制 结 果 也 是 保存 在 
SkCanvas 对 象 中 。 如 果 调 用 者 需要 使 用 软件 方式 来 绘图 ， 如 图 中 左 半 
部 分 所 示 ， 那 么 调用 者 需要 创建 一 个 基本 的 SkDevice 对 象 ， 该 对 象 使 
用 光栅 扫描 的 方法 来 一 一 计算 绘制 的 像素 结果 ， 并 把 结果 存 入 
SkBitmap 对 象 中 。SkBitmap 对 象 使 用 一 块 CPU 内 存 ， 该 内 存 中 保存 的 
是 一 个 个 像素 值 ， 典 型 的 例如 RGBA 格 式 。 


如 果 调 用 者 需要 使 用 GPU 硬件 来 进行 绘图 ， 那 么 在 创建 SkCanvas 
对 象 的 时 候 ， 通 过 传 入 SkSurface Gpu 对 象 即 可 。 当 然 创 建 


SkSurface_Gpu 对 象 需要 很 多 其 他 的 对 象 ， 最 重要 的 是 SkGpuDevice 对 
象 ， 它 是 SkDevice 的 一 个 其 类， 同 原先 软件 方式 不 同 的 是 ， 它 是 将 2D 
图 形 操作 转变 成 对 GL 的 操作 ， 使 用 GrContext 的 3D 图 形 上 下 文 来 绘 
制 ， 并 将 结果 存储 在 GrRenderTarget ， 该 存储 目标 是 GPU 的 内 存 缓冲 
区 。 


从 上 面 的 讨论 可 以 看 出 ，WebKit 调 用 GraphicsContext 对 象 的 时 
候 ，WebKit 根 本 不 知道 下 层 实际 使 用 的 是 软件 还 是 GPU 来 绘制 2D 图 
形 ， 这 一 切 都 是 由 Skia 图 形 库 来 完成 的 ， 当 需要 启动 硬件 加 速 的 时 
候 ，Chromium 只 需要 为 SkCanvas 对 象 设 置 相应 的 对 象 即 可 。 


8.3.1.2 Canvas 2D 


“canvas” 是 HTML5 中 新 加 入 的 元 素 ， 在 最 开始 的 时 候 它 只 是 一 个 
2D 男 布 对 象 ， 网 页 开发 者 可 以 使 用 规范 定义 的 JavaScript 接 口 在 画布 上 
绘制 任意 的 2D 图 形 ， 这 样 的 技术 我 们 称 之 为 Canvas 2D。 不 过 ， 
Khronous 组 织 提出 可 以 在 该 元 素 上 使 用 JavaScript 接 口 绘制 3D 图 形 ， 这 
样 的 技术 我 们 称 之 为 WebGL 或 者 Canvas3D， 这 个 稍 后 会 做 介绍 。 一 个 
“canvas” 元 素 的 对 象 只 能 绘制 2D 图 形 和 3D 图 形 中 的 一 种 ， 不 能 够 同时 
绘制 这 两 者 。 


“canvas” 元 素 的 “getContext”* 方 法 包含 一 个 参数 ， 该 参数 用 来 指定 
创建 上 下 文 对 象 的 类 型 。 对 于 2D 的 图 形 操 作 ， 通 过 传递 参数 值 “2d”， 
浏览 器 会 返回 一 个 2D 图 形 上 下 文 ， 称 为 CanvasRenderingContext2D， 
它 提供 了 用 于 绘制 2D 图 形 的 各 种 应 用 程序 编程 接口 ， 包 括 基本 图 形 绘 
制 (902%. ER, EM) 、 文 字 绘 制 、 图 形变 换 、 图 片 绘制 及 合成 
等 。 


前 面 说 到 ，CanvasRenderingContext2D 是 2D 图 形 绘制 的 上 下 文 对 
象 ， 其 提供 了 用 于 绘制 24 图 形 的 API，W3C 工 作 组 起 草 了 标准 的 草 
案 。 该 对 象 由 JavaScript 代 码 调用 “getContext(02> 国 数 创建 ，Web 开 发 者 
便 可 以 调用 它 的 编程 接口 在 画布 上 绘制 2D 图 形 了 。 这 些 编程 接口 主要 
的 作用 就 是 在 画布 上 绘制 点 、 线 、 和 珑 形 、 级 形 、 图 片 等 ， 除 此 之 外 ， 
还 提供 了 这 些 绘制 的 样式 和 合成 效果 等 。 示 例 代 码 8-3 给 出 了 使 用 
Canvas2D 技 术 的 基本 方法 。 


Canvas 2D 可 以 使 用 软件 方法 来 绘图 ， 也 可 以 使 用 GPU 来 加 速 绘 
图 ， 根 据 前 面 介 绍 的 2D 图 形 上 下 文 和 Chromium 中 使 用 Skia 图 形 库 来 绘 
图 的 方法 ， 网 页 的 Canvas 2D 技 术 同 样 需要 借助 Skia 这 一 技术 。 图 8-27 
描述 了 Canvas 2D 使 用 GPU 来 绘图 所 涉及 的 一 些 主 要 类 。 对 于 软件 绘图 
来 说 ，Chromium 的 工作 过 程 实 际 上 更 简单 一 些 ， 图 中 ImageBuffer 只 是 
使 用 SkCanvas、SkDevice 和 SkBitmap 等 类 ， 这 一 过 程 其 实 不 如 硬件 加 
速 绘图 复杂 ， 所 以 这 里 不 再 费 述 。 


示例 代码 8-3 ”使 用 Canvas2D 技 术 的 网 页 代码 


<“*DOCTYPE HTHL> 
<htal> 
<body> 
<canvas id="myCanvas" width="86" height=""166"> 
your browser does not support the canvas tag 
</Canvas> 
<script type="text/javascript™> 
Var Canvas=document.getElementByld¢ mucanuas ); 
var Ctx=canvas.getContext('2d");5 
ctx.fillStyle=" #FF6666' ; 
ctx.fillRect(6,6,86,166); 
</script> 
</body> 
</html> 
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图 8-27 ”使 用 GPU 硬件 绘图 的 Canvas2D 技 术 


HTML5 的 Canvas2D 机 制 使 用 了 一 个 GraphicsContext 对 象 ， 也 融 是 
2D 图 形 上 上 下文， 同时 还 包括 一 个 ImageBuffer 对 象 来 表示 canvas 绘 制 的 
结果 ， 这 里 软件 绘图 和 GPU 硬件 加 速 绘图 没有 什么 大 的 不 同 。 回 到 
GPU 硬件 绘图 上 来 说 ， 如 果 使 用 硬件 加 速 机 制 的 话 ，Chromium 会 创建 
一 个 SkDeferredCanvas 对 象 ， 该 对 象 的 特别 之 处 在 于 它 采 用 延迟 机 制 
来 绘制 2D 图 形 ， 随 后 介绍 。 该 对 象 当 然 需 要 SkGpuDevice 来 将 2D 绘 图 
操作 转换 为 使 用 3D 图 形 上 下 文 来 绘制 ， 这 一 过 程 跟 上 一 小 节 介绍 的 非 
常 类 似 。 笔 者 需要 强调 的 是 图 中 的 Canvas2DLayerBridge 类 ， 它 是 一 个 
桥接 类 ， 因 为 实际 上 2D 图 形 是 使 用 3D 图 形 接 口 绘制 的 ， 所 以 
Chromium 需 要 3D 图 形 上 下 文 和 一 些 准 备 工作 ， 这 些 都 是 在 该 类 中 完 
成 。 


WebGraphicsContext3DCommandBufferImpl 类 之 后 的 部 分 跟 图 8-12 
介绍 的 过 程 完全 一 样 ， 在 这 种 情况 下 ， 上 层 是 2D 绘 图 还 是 3D 绘 图 已 经 
完全 没有 差别 了 。 


下 面 用 三 个 阶段 来 描述 Chromium 是 如 何 使 用 硬件 加 速 绘图 来 支持 
HTML5 的 Canvas2D 功 能 的 ， 以 示例 代码 8-3 作 为 例子 加 以 说 明 。 首 先 
看 第 一 阶段 。 


第 一 阶段 这 里 称 为 初始 化 阶段 ， 也 就 是 示例 代码 8-3 中 调用 
“fillStyle” 的 阶段 ， 因 为 该 函数 会 触发 图 8- 人 的 人 过 基本 
上 ， 这 一 阶段 的 代码 需要 WebKit 和 Chromium 创 建 图 8-28 所 涉及 类 的 对 
象 ， 读 者 可 以 理解 一 下 它们 的 顺序 。 F.AGraphicsContext2 = Sie 
CanvasRendering-Context2D 类 所 使 用 ， 而 GraphicsContext3D 类 是 被 
Canvas2DLayerBridge 类 使 用 。 这 里 面 还 需要 强调 的 一 点 就 是 合成 器 中 
的 CC::Layer (还 包括 WebLayer， 限 于 图 片 太 大 ， 没有 画 出 ) ， 它 是 由 
Conan yn 这 听 起 来 有 点 奇怪 ， 因 为 CC::Layer 类 和 
GraphicsLayer 类 是 一 一 对 应 的 。 不 过 没关系 ， 因 为 在 这 里 , “canvas” 
TE Ae Fy A ae 多 有 被 创建 ， 它 在 第 二 阶段 才 会 创建 ， 

这 是 为 什么 呢 ? 回想 之 前 的 介绍 ， 在 DOM 创 建 过 程 中 ， 当 WebKit 构 建 
canvas 元 素 的 对 象 时 ， 并 没有 为 它 创 建 RenderLayer 对 象 ， 因 为 这 是 延 
述 执 行 的 。 如 果 “canvas” 元 素 没 有 创建 2D 或 者 3D 图 形 上 下 文 , 它 
需要 RenderLayer 对 象 的 ， 当 然 也 就 没有 RenderLayerBacking 对 象 ， 更 
没有 GraphicsLayer 对 象 。 同 时 ， 这 段 JavaScript 代 码 在 DOM 构 建 过 程 中 
会 被 调用 ， 这 就 造成 了 上 面 所 述 的 这 种 情况 。 
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图 8-28 ”Canvas2D 初 始 化 阶段 的 对 象 创建 顺序 


第 二 阶段 是 WebKit 构 建 RenderLayer 等 对 象 。 在 DOM 树 构建 完 之 
后 ，WebKit 会 检查 有 无 变化 的 CSS 样 式 ， 在 这 里 JavaScript 代 码 改变 了 
canvas 元 素 的 属性 ， 所 以 WebKit 会 更 新 RenderObject 树 和 RenderLayer 
树 。 图 8-29 描 述 了 这 一 阶段 。 
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图 8-29 ”为 Canvas 元 素 创 建 RenderLaver 等 并 设置 GraphicsLaver 
y p y 


在 这 里 ， 笔 者 不 想 重 复 RenderLayer 等 对 象 的 创建 ， 而 想 重 点 强调 
GraphicsLayer 对 象 如 何 设置 自己 的 WebLayer 成 员 变 量 。 方 法 是 这 样 
BY: WebKit 中 的 RenderLayerBacking 对 象 检查 是 否 是 canvas 元 素 ， 如 果 
是 ， RenderLayerBacking 对 R M HTMLCanvasElement 对 象 中 获得 
CanvasRenderingContext2D 对 象 ， 这 一 上 下 文 对 象 的 platformLayer 函 数 
能 够 得 到 之 前 创建 的 webLayer 对 象 ， 这 样 WebKit 就 建立 了 RenderLayer 
和 GraphicsLayer 的 映射 天 系 。 为 了 简洁 起 见 ， 图 中 省 略 了 一 些 步骤 。 

第 三 个 阶段 就 是 绘图 部 分 。 图 8-30 详 细 描 述 了 这 一 思想 和 主要 过 
程 。Chromium 采 用 缓存 模式 来 处 理 JavaScript 代 码 的 2D 图 形 操 作 ， 也 
就 是 说 ， 当 JavaScript 通 过 标准 的 接口 调用 2D 图 形 的 时 候 ，Chromium 
使 用 SkDeferredCanvas 对 象 保存 2D 图 形 操作 ， 当 Chromium 需 要 绘制 一 
个 新 帧 的 时 候 ，Skia 图 形 库 才 会 一 次 性 提交 并 绘制 这 些 缓存 的 操作 。 


8-30 ”Chromium 中 的 Canvas2D 绘 图 过 程 


先 看 图 中 的 上 半 部 分 ， 当 JavaScript 调 用 2D 绘 图 接口 时 需要 使 用 
contextAcquired() 遂 数 获取 2D 图 形 上 下 文 ，Chromium 据 此 判断 后 面 修 
改 男 布 的 内 容 ， 所 以 Chromium 会 使 用 Canvas2DLayerManager 类 来 设置 
一 个 TaskObserver 对 象 到 主 消息 循环 ， 这 样 做 的 好 处 是 等 到 JavaScript 
代码 调用 2D 绘 图 接口 之 后 ， 才 会 触发 真正 的 绘图 动作 。 而 JavaScript 代 
码 调用 的 这 些 操作 都 是 依靠 SkDeferredCanvas 来 保存 的 。 


图 中 的 下 半 部 分 表示 当前 面 JavaScript 调 用 2D 绘 图 接口 完毕 后 ， 
WebKit 调 用 TaskObserver 类 的 didProcessTask FF 法 o 
Canvas2DLayerManager 类 调用 CanvasLayerBridge 类 来 判断 是 否 需要 刷 
新 那些 操作 。Canvas2DLayerBridge 类 检查 并 重 置 前 面 设 置 的 标记 ， 如 
果 时 机 合适 的 话 ， 该 类 调用 SkDeferredCanvas 类 的 flush 函 数 提 交 前 面 
保存 的 所 有 绘图 操作 ， 这 样 就 完成 了 Canvas2D 的 绘制 工作 。 


当 合 成 器 调用 updateLayers 国 数 的 时 候 ， 该 函数 会 触发 每 个 合成 层 
绘制 自己 。 因 为 Canvas2D 机 制 是 由 JavaScript 代 码 来 绘制 2D 图 形 ， 所 


以 这 个 时 候 canvas 所 在 的 合成 层 实际 上 已 经 绘制 完成 (或 者 说 绘制 操 
作 已 经 缓存 起 来 了 ) 。 图 8-31 描 述 了 合成 器 要 求 绘 制 Canvas2D 的 合成 
层 的 过 程 ， 读 者 可 以 看 到 ， 这 时 候 WebKit 实 际 上 不 需要 绘制 该 层 ， 只 
需要 改变 一 下 3D 图 形 上 下 文 的 状态 。 
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图 8-31 Chromium 中 合成 器 调用 绘制 Canvas2D 的 合成 层 


从 中 读者 可 以 发 现 ， 这 一 机 制 虽然 延迟 了 一 些 操作 (实际 上 没有 
什么 影响 ) ， 但 是 nae ir 延迟 思想 非常 有 用 ， 也 就 是 合 
并 很 多 2D 绘 图 操作 (3 ， 这 样 能 够 有 效 提 高 绘制 的 性 能 。 


8.3.2 WebGL 


8.3.2.1 3D 图 形 上 下 文 


前 面 提 到 过 3D 图 形 上 下 文 ，WebCore 表 示 该 上 下 文 的 抽象 类 是 
GraphicsContext3D o WebKit 的 Chromium 移植 定义 了 
de 接口 ， 该 接口 类 是 GraphicsContext3D 的 实现 

类 ， 基 本 上 实现 类 的 所 有 接口 都 可 以 映射 到 OpenGL ES 2.0 规范 所 定 
义 的 编程 接口 。 


图 8-32 中 包含 7 了 三 个 类 m FW X 
WebGraphicsContext3DCommandBufferImpl ) 该 类 
WebGraphicsContext3D 类 对 应 的 使 用 命令 缓冲 区 的 实现 子 类 。 前 面 提 
到 的 合成 过 程 和 Canvas2D， 包 括 本 节 介 绍 的 WebGL 都 会 使 用 该 类 来 实 
现 3D 图 形 操 作 。 
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图 8-32 3D 图 形 上 下 文 和 Chromium 的 实现 类 


8.3.2.2 WebGL 的 实现 


WebGL 是 Khronous 组 织 提 出 的 一 套 基 于 3D 图 形 定义 的 JavaScript 接 
口 ， 它 基于 canvas 元 素 ， 跟 Canvas2D 不 同 的 是 ，Web 开 发 者 可 以 使 用 
3D 图 形 接 口 来 绘制 各 种 3D 图 形 。 根 据 WebGL 规 范 中 的 描述 ， 这 些 接 
口 可 以 分 成 下 面 几 个 主要 的 部 分 。 


。 上下文 及 内 容 展示 : 在 使 用 webGL 的 编程 接口 之 前 ， 开 发 者 需 
获取 WebGL-RenderingContext 和 DrawingBuffer 接 口 (Chromium 需 
要 它 ) o XW JavaScript 代码 来 说 ，GL 的 操作 都 是 由 
WebGLRenderingContext 对 象 来 负责 完成 。 但 是 ，DrawingBuffer 
接口 对 用 户 来 说 是 透明 的 ， 它 用 来 存储 泻 染 的 内 容 并 被 合成 器 所 
合成 ， 包 括 帧 缓冲 器 对 象 (绘制 的 结果 存储 ) 和 纹理 对 象 (纹理 
被 合成 器 所 使 用 ) 。 


。 WebGL 的 资源 及 其 生命 周期 : 纹理 对 象 、 缓 冲 区 (VBOs) 、 帧 
缓冲 区 、 泻 染 缓冲 区 、 着 色 器 等 (这 些 也 都 是 OpenGL 的 资源 ) o 
它们 有 对 应 的 JavaScript 对 象 即 与 WebGLObject 对 应 ， 这 些 对 象 的 
生命 周期 是 一 致 的 。 

安全 : WebGL 规 范 为 保证 安全 性 ， 第 一 ， 所 有 的 WebGL 资 源 必须 

包含 初始 化 的 数据 ; 第 二 ， 来 源 安全 性 ， 为 防止 信息 泄露 ， 当 

“canvas” 元 素 的 属性 “origin-clean” 为 false 时 ，readPixels 将 会 抛 出 安 

全 方面 的 异常 ， 第 三 ， 要 求 所 有 的 着 色 语 言 必须 符合 OpenGL ES 

Shading Language 1.0; 第 四 ， 为 防止 DOS 攻 击 ， 规 范 建议 采取 适 

当 的 措施 对 人 花费 时 间 过 长 的 泻 染 操作 过 程 进行 监控 和 限制 。 

。 WebGL 接 口 : 主要 包括 各 种 资源 类 的 接口 和 上 下 文 类 的 接口 ， 
这 些 接口 用 于 绘制 3D 的 操作 ， 它 们 基本 上 来 源 于 OpenGL ES 2.0 
定义 的 接口 。 

e WebGL 与 OpenGLES 2.0 的 区 别 : 这 里 不 再 一 一 介绍 ， 读 者 可 以 
自行 翻阅 和 了 解 相 关 细 节 。 读 者 假如 想 要 了 解 自 己 的 浏览 器 对 
WebGL 支 持 的 详细 情况 ， 请 访问 http://webglreport.sourceforge.net/ 
获取 详细 参数 。 


针对 规范 定义 的 内 容 ，WebKit 和 Chromium 定 义 了 相应 的 类 来 描述 
它们 ， 8-33 给 出 了 主要 类 。 WebGLRenderingContext 类 [Al 
CanvasRenderingContext2D 类 的 作用 类 似 ， 都 是 规范 定义 的 接口 。 不 同 
的 是 ，WebGL 的 接口 是 3D 图 形 操 作 。WebGLRenderingContext 类 同样 
需要 一 个 GraphicsContext3D 类 和 它 的 实现 类 ， 除 此 之 外 ， 还 需要 一 个 
DrawingBuffer 类 ， 它 类 似 于 Canvas2D 中 的 ImageBuffer， 它 的 作用 是 保 
存 WebGL 泻 染 目 标 结 果 ，WebKit 将 泻 染 结果 用 来 合成 。 
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图 8-33” ”WebKit 和 Chromium 中 支持 WebGL 的 主要 类 


下 面 同样 以 例子 来 说 明 WebGL 的 工作 过 程 ， 示 例 代 码 8-1 中 就 是 一 
个 使 用 WebGL 技 术 的 网 页 ， 以 此 例 为 基础 来 描述 这 一 个 过 程 。 跟 
Canvas2D 的 过 程 分 析 一 样 ， 这 里 同样 也 把 Chromium 中 WebGL 的 工作 


过 程 分 成 三 个 阶段 。 


第 一 阶段 是 对 象 的 初始 化 阶段 ， 当 JavaScript 引 擎 调用 示例 代码 中 


的 getContext 国 数 的 时 候 ，WebKit 就 会 执行 如 图 8-34 所 示 的 对 象 创建 顺 
序 ， 这 一 过 程 跟 Canvas2D 的 对 象 创建 过 程 非常 类 似 。 不 同 的 是 ， 这 一 


阶段 不 会 创建 CC::Layer 对 象 。 
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1.1.6: return 


kK ------ 


图 8-34 WebGL 初 始 化 阶段 的 对 象 创建 顺序 


第 二 阶段 是 构建 RenderLayer、WebLayer、CC::Layer 等 对 象 ， 同 
样 是 在 DOM 树 构建 之 后 检查 CSS 样 式 变化 时 才 会 被 触发 。 当 
RenderLayer 等 对 象 被 创建 之 后 ，WebKit 设 置 GraphicsLayer 对 象 所 对 应 
的 WebLayer 对 象 。 同 Canvas2D 不 一 样 的 是 ， 此 时 DrawingBuffer 对 象 才 
会 开始 请 求 创建 WebLayer (WebLayerlmpl) 和 TextureLayer 对 象 ， 之 
后 WebKit 同 样 将 WebLayer 对 象 设置 到 GraphicsLayer 中 。 图 8-35 朱 述 了 
这 一 过 程 ， 为 了 简洁 起 见 ， 图 中 省 略 了 一 些 步骤 。 


RenderLayer WebGLRenderi 
Backing ngContext 
T 


DrawingBuffer WebLayer TextureLayer GraphicsLayer 


RenderLayerCo 
mpositor 
T 


T 


1: dadila phicsLayerConfiguration 


.1: platformLayer 


T 

| 

| 

| 

.1.1: platformLa el 
1.1.1.1: new 


1.1.1.1.1: new 


LN Az: 


1.3: seContentsTo(Web| ayer) 


1.5:return | 长 一 一 一 一 一 一 一 本 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 


图 8-35 ”WebGL 创 建 RenderLayer 和 TextureLayer 等 对 象 


第 三 阶段 是 3D 绘 图 部 分 ， 图 8-36 是 一 个 简单 的 WebGL 使 用 
clearColor 接 口 来 设置 颜色 的 JavaScript 代 码 被 WebKit 执 行 的 过 程 。 同 
Canvas2D 机 制 不 一 样 的 是 ， 每 个 GL 的 调用 都 是 直接 通过 
WebGraphicsContext3DCommandBufferlmpl 3 4% GL @ $ fE 24 GPU # 
程 ， 这 一 过 程 没有 使 用 缓存 机 制 ， 而 是 直接 将 命令 传递 给 GPU 进程 。 


V8 Engine WebGLRenderingContext GraphicsContext3D WebGraphicsContext3DCo 
mmandBufferlmpl 
T T T T 
f | 


1:13D 图 形 操作 ， 


例如 cleardolor 
1.1: clearColor 


图 8-36 ”WebGL 绘 制 3D 图 形 


同样 的 ， 当 合成 器 调用 updateLayers 图 数 的 时 候 ， 访 函数 会 触发 
WebGL 所 使 用 的 合成 层 绘制 合成 层 的 目标 结果 到 合成 层 的 存储 结果 。 
WebGL 所 在 层 的 内 容 在 合成 器 请 求 更 新 该 层 之 前 已 经 由 WebKit 完 成 。 
图 8-37 摘 述 了 合成 器 要 求 绘制 WebGL 的 合成 层 时 候 的 过 程 ， 
DrawingBuffer 所 要 做 的 就 是 刷新 3D 图 形 上 下 文中 的 结果 数据 ， 并 返回 
结果 。 


LayerTree Host TextureLayer WebExternalTexture DrawingBuffer GraphicsContext3D 
Layerlmpl 
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T 
| 

1: Update | 
1.1: PrepareTexture, i 
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1.1: prepareTexture 


-1.2: markLayerComposited 
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图 8-37 Chromium 中 合成 器 调用 绘制 WebGEL 的 合成 层 


8.3.3 CSS 3D 变 形 


CSS 3D 变 形 和 动画 是 HIML5 引 入 的 新 特性 ， 作 用 是 能 够 对 任意 
DOM 子 树 作 3D 变 形 。 这 一 特性 非常 有 用 ， 它 同 WebGL 提 供 的 能 力 是 
不 一 样 的 。WebGL 是 在 一 个 “canvas” 元 素 内 部 绘制 3D 图 形 ，CSS 3D 变 
形 功 能 可 以 对 任何 元 素 进 行 3D 变 形 ， 它 是 一 个 可 以 被 元 素 子 女 继 承 的 
属性 ， 也 就 是 一 个 元 素 和 它 的 子女 都 会 作 相应 的 3D 变 形 。 


WebKit 对 应 用 该 变形 技术 的 DOM 子 树 使 用 单独 的 合成 层 和 硬件 加 
速 机 制 。 当 使 用 JavaScript 代 码 改变 该 元 素 的 3D 变形 样式 后 ， 
Chromium 能 够 减少 网 页 每 一 帧 演 染 所 需要 的 时 间 ， 典 型 的 例子 就 是 前 
面 提 到 的 网 页 ， 来 自 于 www.famo.us。 


以 示例 代码 6-1 所 展示 的 CSS 3D 变 形 为 例 ， 说 明 3D 变 形 是 如 何 被 
WebKit 和 Chromium 处 理 的 。 对 于 WebKit 需 要 创建 RenderLayer 等 对 
象 ， 之 前 已 经 介绍 过 ， 这 里 不 再 费 述 。 图 8-38 介 绍 了 WebKit 和 
Chromium 设 置 3D 变 形 值 的 过 程 。 


RenderLayer RenderLayerBacking 


| 1: update GraphicsLayerGeometry 
P 1.1: update Transform 


GraphicsLayer CC: :Layer 


| WebLayerlmpl 


1.2.1: setTransform 


2.1.1: setTransform 


12.12: 


i | 
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图 8-38 ”设置 合成 器 中 的 Layer 对 象 的 3D 变 形 值 


当 网 页 中 JavaScript 代 码 修 改元 素 的 变换 属性 值 的 时 候 ， 通 过 上 面 
的 过 程 ， 最 后 样式 是 设置 在 该 合成 层 (前 景 层 ) 上 ， 当 WebKit 将 元 素 
绘制 完成 之 后 ， 在 合成 过 程 中 ，WebKit 通 过 3D 变 形 作 用 到 该 合成 层 
上 ， 即 可 完成 特定 的 效果 。WebKit 只 是 在 第 一 次 需要 绘制 “div” 元 素 的 
内 容 ， 之 后 仅仅 设置 变换 属性 值 ， 然 后 重新 合成 即 可 。 当 合成 器 调度 
绘制 该 合成 层 的 时 候 ，WebKit 根 本 不 会 发 生 想 象 中 的 重新 布局 和 重 绘 
动作 。 虽 然 用 户 看 起 来 网 页 内 容 在 变动 ， 但 是 这 只 是 合成 的 动作 ， 这 
些 动 画 等 都 是 WebKit 和 Chromium 设 计 的 机 制 和 硬件 加 速 带 来 的 效果 。 


8.3.4 ”其 他 


网 页 中 还 有 很 多 其 他 的 模块 可 以 使 用 GPU 硬件 机 制 来 加 速 ， 例 如 
支持 视频 解码 和 播放 、2D 图 形 绘制 等 ，WebKit 支 持 它们 的 主要 思想 
旧 是 对 这 些 内 容 进行 分 层 ， 使 用 GPU 的 强大 绘图 能 力 来 支持 这 些 模 
块 ， 关 于 视频 方面 的 介绍 ， 笔 者 将 在 第 11 章 * 多 媒体 ” 作 进 一 步 的 前 
述 。 读 者 还 可 以 思考 一 下 有 没有 其 他 地 方 可 以 使 用 加 速 机 制 。 


另外 ， 还 有 很 多 新 的 思路 对 硬件 加 速 机 制 进行 改进 ， 典 型 的 做 法 
是 使 用 多 线程 机 制 ， 因 为 现代 处 理 器 都 包含 多 核 ， 使 用 线程 化 的 方法 
来 支持 网 页 的 泻 染 是 一 个 很 好 的 思路 。 当 然 线 程 化 的 代价 就 是 webKit 
需要 同步 或 者 内 容 的 拷贝 ， 例 如 前 面 介绍 的 线程 化 合成 器 、Layer 树 和 
LayerImpl 树 。Chromium 为 了 减少 同步 和 等 待 的 开销 ， 创 建 LayerImpl 
树 并 拷贝 Layer 树 的 内 容 ， 但 是 这 一 做 法 带 来 的 好 处 也 很 明显 。 所 谓 有 
利 也 有 尊 正 是 如 此 ， 关 键 看 应 用 场景 的 实际 效果 如 何 。 


8.3.5 XR: Chromium 的 支持 


Chromium 使 用 GPU 加 速 机 制 来 加 速 网 页 泻 染 被 广泛 地 应 用 在 各 种 
网 页 中 。Chromium 浏览 器 对 网 页 泻 染 的 理解 的 确 很 不 一 样 ， 在 网 页 功 
能 越 来 越 强 的 同时 ， 用 户 也 能 够 取得 较 好 的 性 能 和 体验 效果 。 


图 8-39 描 述 了 Chromium 目前 能 使 用 GPU 硬件 加 速 的 各 项 网 页 功 
能 ， 这 是 在 windows 系 统 上 显示 的 结果 ， 在 其 他 平台 上 ， 结 果 可 能 不 
一 样 ， 例 如 在 Android 上 面 可 能 有 更 多 跟 加 速 相 关 的 功能 。 图 中 的 一 些 
功能 之 前 已 经 介绍 过 ， 例 如 Canvas、 Compositing、3D CSS 和 CSS 


Animation、WebGL 等 。 不 过 ， 还 有 些 其 他 的 功能 笔者 并 没有 介绍 ， 例 
如 Flash、Video、WebGL multisampling (WebGL 中 的 反 锯 齿 技 术 ) 
等 。 除 了 Video 之 外 ， 读 者 对 其 他 功能 有 兴趣 的 话 ， 可 以 自行 参考 相关 
材料 。 


Graphics Feature Status 
e Canvas: Hardware accelerated 
Compositing: Hardware accelerated on all pages and threaded 
3D CSS: Hardware accelerated 
CSS Animation: Accelerated and threaded 
WebGL: Hardware accelerated 
WebGL multisampling: Hardware accelerated 
Flash 3D: Hardware accelerated 
Flash Stage3D: Hardware accelerated 
Flash Stage3D Baseline profile: Hardware accelerated 
Texture Sharing: Hardware accelerated 
Video Decode: Hardware accelerated 
Video: Hardware accelerated 
Panel Fitting: Unavailable. Hardware acceleration disabled. 
Rasterization: Software only. Hardware acceleration disabled. 
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18-39 _ Chromium 和 能够 使 用 GPU 加 速 的 功能 


天 于 使 用 硬件 加 速 和 合成 器 的 实践 ， 读 者 可 以 回顾 第 2 章 中 图 2-5 
所 描述 的 网 页 层次 结构 。 相 信 读 者 现在 对 那些 合成 层 ， 以 及 将 合成 层 
分 成 瓦 片 的 理解 更 深 了 。 


D. 该 图 参考 于 Chromium 工 程 师 的 文档 “Compositing in Blink/WebCore:From 
WebCore::RenderLayer to cc:Layer”o 
(2) 因为 Renderer 进 程 需 要 等 待 GPU 进 程 做 好 某 些 操作 之 后 才 继 续 执行 。 


(3) 基于 GLES 的 编码 格式 ， 因 为 WebGL 也 可 以 简单 理解 成 是 基于 GLES 的 JavaScript 绑 
定 ， 所 以 简单 直观 并 且 容 易 支 持 WebGL 的 需求 。 


(4) 典型 的 衡量 标准 是 FPS，Frame Per Second， 也 就 是 每 秒 更 新 的 帧 数 。 
(5) 因为 SkDeferredCanvas 采 用 批 处 理 方式 工作 ， 可 以 合并 或 者 取消 一 些 操作 


第 9 章 J avaScript5 |= 


Web 技 术 的 发 展 让 JavaScript 语 言 远 远 超出 了 之 前 的 设计 初衷 ， 在 
承载 着 越 来 越 强 大 能 力 的 同时 ， 它 的 性 能 也 越 来 越 受到 关注 。 让 我 们 
带 着 这 样 一 些 问题 进入 本 章 一 一 为 什么 JavaScript 代 码 的 运行 速度 会 这 
么 慢 ， 以 及 现代 JavaScript 引 擎 是 如 何 提高 JavaScript 代 码 的 速度 的 。 在 
介绍 JavaScript 语 言 的 特性 之 后 ， 了 逐步 剖析 现代 JavaScript 引 擎 的 工作 原 
理 和 为 了 提高 性 能 所 做 的 巨大 努力 。 当 然 ， 本 章 解释 的 重点 主要 是 现 
在 webKit 中 广泛 使 用 的 JavaScriptCore 引 擎 和 V85 擎 ， 两 者 有 一 些 共 通 
之 处 ， 却 又 有 一 些 不 同 之 处 。 


9.1 概述 


9.1.1 JavaScripts 


说 起 JavaScript 语 言 ， 又 要 讲 一 个 典型 的 从 弱小 到 壮大 的 奋斗 史 。 
起 初 ， 它 只 是 一 个 非常 不 起 眼 的 语言 ， 用 来 处 理 非常 小 众 的 问题 。 所 
以 ， 从 设计 之 初 ， 它 的 目标 就 是 解决 一 些 脚 本 语言 的 问题 ， 因 为 设计 
的 能 力 有 限 ， 性 能 不 需要 重点 考虑 。 因 为 使 用 场景 少 ， 所 以 用 户 对 于 
性 能 的 要 求 也 比较 低 。 在 过 去 几 年 ， 由 于 Web 时 代 的 来 临 和 HTML5 的 
兴起 ， 这 一 切 让 JavaScript 前 所 未 有 地 成 为 焦点 ， 自 然 它 的 功能 和 性 能 
在 大 家 的 努力 下 都 有 了 长 足 的 进步 。 


JavaScript 是 一 种 脚本 语言 ， 主 要 用 在 Web 的 客户 端 (这 样 说 也 不 
准确 ，Node.js 和 其 他 一 些 用 法 的 出 现 就 是 例外 ) ， 它 的 出 现 是 为 了 控 
制 网 页 客户 端的 逻辑 ， 例 如 同 用 户 的 交互 、 异 步 通信 等 需求 。 当 然 ， 


在 HTML5 高 速 发 展 的 今天 ， 它 的 作用 越 来 越 大 ， 被 广泛 地 使 用 在 各 种 
其 他 技术 中 。 


本 质 上 它 是 一 种 解释 型 语言 (不 知道 按照 现在 的 实现 来 看 ， 这 么 
说 是 不 是 准确 ) ， 遂 数 是 它 的 第 一 等 公民 ， 也 就 是 水 数 也 能 够 当 作 参 
数 或 者 返回 值 来 传递 。 示 例 代码 9-1 是 一 个 简单 的 例子 ， 读 者 可 以 看 到 
一 个 简单 的 水 数 “getOperation”， 它 的 返回 值 就 是 一 个 匿名 消 数 。 


示例 代码 9-1 ”函数 作为 函数 的 返回 值 


function getOperation() { 
return function () { 
print("JavaScript"); 
}; 
} 


JavaScript 语 言 的 另 一 个 重大 特点 就 是 ， 它 是 一 种 无 类 型 语言 ， 或 
者 说 是 动态 类 型 语言 。 相 比较 而 言 ，C++ 或 者 Java 等 语言 都 是 静态 类 
型 语言 ， 它 们 在 编译 的 时 候 就 能 够 知道 每 个 变量 的 类 型 。 但 是 ， 
JavaScript 的 语言 特性 让 我 们 没有 办 法 在 编译 的 时 候 知道 变量 的 类 型 ， 
所 以 只 能 在 运行 的 时 候 才 能 确定 ， 这 导致 JavaScript 语 言 的 规范 面临 着 
性 能 方面 的 巨大 压力 。 在 运行 时 计算 和 决定 类 型 ， 会 带 来 很 严重 的 性 
能 损失 ， 这 导致 了 JavaScript 语 言 的 运行 效率 比 C++ 或 者 Java 都 要 低 很 
多 。 


先 看 示例 代码 9-2 所 示 的 一 个 简单 的 JavaScript 代 码 ， 它 是 一 个 简单 
得 不 能 再 简单 的 包含 两 个 参数 的 JavaScript 国 数 ， 其 目的 就 是 计算 参数 


a 的 属性 为 x 的 值 与 参数 b 的 属性 为 y 的 值 的 和 。 
示例 代码 9-2 ”一 个 简单 的 JavaScript 函 数 


function add(a, b) { 
return a.x*a.y + b.x*b.y; // 这 里 对 象 a 和 b 的 类 型 未 知 
} 


问题 来 了 ， 当 JavaScript 引 擎 分 析 到 该 段 代 码 的 时 候 ， 根 本 没有 办 
法 知道 a 和 b 是 什么 类 型 ， 唯 一 的 办 法 就 是 运行 的 时 候 根 据 实际 传递 过 
来 的 对 象 再 来 计算 。 读 者 可 能 会 好 奇 ， 这 好 像 并 没什么 特别 的 嘛 ， 事 
实 上 这 会 导致 严重 的 性 能 问题 。 

让 我 们 来 简单 解释 一 下 为 什么 静态 类 型 能 够 大 量 地 市 省 运行 时 
间 。 示 例 代 码 9-3 是 一 个 简单 的 C++ 阔 数 ， 它 同 9-2 类 似 ， 不 同 之 处 在 于 


参数 必须 指定 类 型 。 


示例 代码 9-3 ”一 个 简单 的 C++ 函数 


int add(Class1 a, Class1 b) { class Class1 { 


return a.x*a.y + b.x*b.y; int x; 
} int y; 
} 


当 编 译 示例 代码 9-3 中 左边 部 分 的 时 候 ， 根 据 右边 部 分 类 型 Class1 
的 定义 ， 获 取 对 象 a 的 属性 x 的 时 候 ， 其 实 就 是 对 象 a 的 地 址 ， 大 小 是 一 


个 整形 。 同 时 获取 对 象 b 的 属性 y 的 时 候 ， 其 实 就 是 对 象 b 的 地 址 加 上 4 
个 字 节 (不 同 的 平台 上 可 能 不 同 ， 但 是 一 旦 平台 确定 ， 其 值 是 固定 
AY)  ， 这 些 都 是 在 生成 本 地 代码 的 时 候 确定 的 ， 无 须 在 运行 本 地 代码 
的 时 候 决 定 它 们 的 地 址 和 类 型 是 什么 ， 这 显然 能 够 节省 时 间 。 


图 9-1 示例 代码 9-3 中 的 类 和 对 象 的 结构 表示 


图 9-1 中 最 右 侧 表 示 的 是 类 Class1 的 属性 对 应 的 地 址 信息 ， 在 编译 
阶段 ， 编 译 器 根据 int 类 型 来 决定 属性 占用 4 个 字 节 ， 地 址 就 是 对 象 的 
地 址 ， 因 为 偏 移 量 为 0。 所 以 对 于 y 来 说 ， 访 问 它 只 需要 将 对 象 地 址 加 
上 4 个 字 节 即 可 ， 也 就 是 偏 移 量 为 4。 所 以 在 编译 的 时 候 ， 能 够 确定 访 
问 对 象 中 属性 的 偏 移 量 ， 根 据 这 些 信息 ， 可 以 生成 相应 的 汇编 代码 。 
其 中 的 符号 信息 ， 例 如 字符 “x” 和 “y” 运 行 时 都 不 再 需要 ， 因 为 不 再 需 
要 额外 的 查找 这 些 属性 地 址 的 工作 。 在 C++ 和 Java 等 语言 中 ， 已 事先 
知道 所 存 取 的 成 员 变量 (类 ) 类 型 ， 所 以 语言 解释 系统 (Interpreting 
System) 只 要 利用 数组 和 位 移 来 存 取 这 些 变 量 和 方法 的 地 址 等 。 位 移 
信息 使 它 只 要 几 个 机 器 语言 指令 ， 就 可 以 存 取 变 量 、 找 出 变量 或 执行 
其 他 任务 。 


现在 继续 回 到 JavaScript 代 码 中 来 ， 对 于 传统 的 JavaScript 解 释 器 ， 
所 有 这 一 切 都 是 解释 执行 ， 所 以 效率 不 会 高 到 哪 去 。 不 管 是 解释 器 还 
是 现在 更 为 高 效 的 JIT (Just-In-Time) 技术 ， 面 临 的 难题 都 是 类 型 问 
题 。 现 在 我 们 也 将 JavaScript 代 码 的 处 理 分 成 两 个 阶段 ， 就 是 编译 阶段 
(虽然 跟 传统 的 编译 有 些 不 同 ) 和 执行 阶段 。 对 于 JavaScript 引 擎 来 


说 ， 因 为 没有 C++ 或 者 Java 这 样 的 强 类 型 语言 的 类 型 信息 ， 所 以 
JavaScript 引 擎 通常 的 做 法 就 是 如 图 9-2 所 表示 的 方法 来 存储 每 一 个 对 
象 。 


对 象 a 的 结构 
表示 


图 9-2 ”示例 代码 9-2 的 对 象 a 和 b 的 结构 表示 


基本 的 工作 方式 是 这 样 ， 当 创建 对 象 a 的 时 候 (这 个 当然 是 执行 阶 
R) ， 如 果 它 包含 两 个 属性 《根据 JavaScript 的 语言 特性 ， 没 有 类 型 ， 
而 且 这 些 属 性 都 是 动态 创建 的 ， 属 性 就 是 前 面 说 的 C++ 的 类 成 员 变 
=) ， 那 么 引擎 会 为 它们 创建 如 图 9-2 左 边 所 示 的 结构 ， 也 就 是 属性 
名 -属性 值 对 ， 需 要 强调 的 是 这 些 属 性 名 (典型 的 做 法 就 是 采用 字符 
R) 都 是 会 被 保存 的 ， 因 为 之 后 访问 该 对 象 的 属性 值 时 需要 通过 属性 
名 匹配 来 获取 相应 的 值 。 读 者 看 到 对 象 b 是 同样 的 结构 ， 也 同样 保存 相 
同 的 属性 ， 因 为 JavaScript 没 有 类 型 ， 所 以 每 个 对 象 需要 目 己 保存 这 些 
信息 。 在 降低 性 能 的 同时 ， 读 者 也 会 发 现 它 们 存在 内 容 匈 余 的 部 分 ， 
比如 对 象 a 和 对 象 b 都 保存 相同 的 属性 名 ， 随 着 对 象 的 增多 ， 这 显然 会 
带 来 空间 上 的 巨大 浪费 。 


追根 究 底 ， 这 里 的 目的 获取 对 象 属性 值 的 具体 位 置 ， 也 就 是 相对 
于 对 象 基 地 址 的 偏 移 位 置 。 从 这 个 角度 来 看 ，JavaScript 和 C++ 语言 
(下 面 的 解释 需要 对 C++ 语言 有 一 些 基本 的 认识 ) 上 的 区 别 包 括 以 下 
几 个 部 分 。 


。 编译 确定 位 置 : C++ 有 明确 的 两 个 阶段 ， 而 编译 这 些 位 置 的 偏 移 
信息 都 是 编译 器 在 编译 的 时 候 就 决定 了 的 ， 当 C++ 代码 编译 成 本 


地 代码 之 后 ， 对 象 的 属性 和 偏 移 信息 都 计算 完成 。 因 为 JavaScript 
没有 类 型 ， 所 以 只 有 在 对 象 创 建 的 时 候 才 有 这 些 信息 ， 因 而 只 能 
在 执行 阶段 确定 ， 而 且 JavaScript 语 言 能 够 在 执行 时 修改 对 象 的 属 
性 (不 是 属性 值 ， 而 是 添加 或 者 删除 属性 本 身 ) 。 

偏 移 信息 共享 : C++ 因为 有 类 型 定义 ， 所 以 所 有 对 象 都 是 按照 该 
类 型 来 确定 的 ， 而 且 不 能 在 执行 的 时 候 动态 改变 类 型 ， 因 为 这 些 
对 象 都 是 共享 偏 移 信 息 的 。 访 问 它们 只 需要 按照 编译 时 确定 的 偏 
移 量 即 可 。 而 对 于 C++ 模 板 的 支持 ， 其 实 是 多 份 代码 ， 因 为 本 质 
上 其 道理 是 相同 的 。JavaScript 则 不 同 ， 每 个 对 象 都 是 自 描述 ， 属 
性 和 位 置 偏 移 信息 都 包含 在 自身 的 结构 中 。 

偏 移 信息 查找 : C++ 中 查找 偏 移 地 址 很 简单 ， 都 是 在 编译 代码 
时 ， 对 使 用 到 某 类 型 的 成 员 变 量 直接 设置 偏 移 量 。 而 对 于 
JavaScript， 使 用 到 一 个 对 象 则 需要 通过 属性 名 匹配 才能 碍 找到 对 
应 的 值 ， 这 实在 太 费 时 间 了 。 


对 于 这 个 问题 读者 可 能 觉得 其 对 性 能 的 影响 不 大 ， 其 实 不 是 这 
样 。 因 为 对 象 属性 的 访问 非 单 普 壳 而 且 次 数 非 单 频 每 ， 而 通过 偶 移 量 
来 访问 值 并 且 知 道 该 值 的 类 型 ， 使 用 少数 两 个 汇编 指令 就 能 完成 ， 但 
是 ， 对 于 图 9-2 中 的 通过 属性 名 来 匹配 对 于 性 能 造成 的 影响 可 能 会 多 很 
多 倍 ， 因 为 属性 名 匹配 需要 特别 长 的 时 间 ， 而 且 额 外 浪费 很 多 内 存 空 
间 ]。 


有 方法 解决 这 一 问题 吗 ? 答案 是 肯定 的 。 当 然 要 达到 跟 C++ 和 
Java 一 样 的 效率 很 难 ， 但 是 已 经 有 很 多 方法 能 够 逐步 接近 了 ， 笔 者 在 
介绍 JavaScriptCore 引 | 擎 和 V83| 擎 的 时 候 再 论述 它们 ， 因 为 这 些 新 技术 
的 确 市 来 了 性 能 上 的 巨大 进步 。 


推动 JavaScript 运 行 速度 提高 的 另 一 大 利器 是 JIT (Just-In-Time) 
技术 ， 它 不 是 一 项 全 新 的 技术 ， 其 作用 是 解决 解释 性 语言 的 性 能 问 
题 ， 主 要 思想 是 当 解 释 器 将 源 代码 解释 成 内 部 表示 的 时 候 (Java 字 节 
码 就 是 一 个 典型 例子 ) ，JavaScript 的 执行 环境 不 仅 是 解释 这 些 内 部 表 
示 ， 而 且 将 其 中 一 些 字 节 码 (主要 是 使 用 率 高 的 部 分 ) 转 成 本 地 代码 
(汇编 代码 ) ， 这 样 可 以 被 CPU 直接 执行 ， 而 不 是 解释 执行 ， 从 而 极 
大 地 提高 性 能 。JIT 技 术 被 广泛 地 使 用 在 各 种 语言 的 执行 环境 中 ， 例 如 
Java 虚 拟 机 ， 经 过 长 时 间 的 演进 之 后 ， 目 前 使 用 在 JavaScript 的 众多 引 
擎 中 ， 例 如 JavaScriptCore、V8、SpiderMonkey 等 中 。 


下 面 要 说 的 是 JavaScript 的 作用 域 链 和 闭 包 等 概念 ， 它 们 非常 重 
要 ， 这 两 个 概念 带 来 了 编程 上 的 便 易 性 和 模块 化 ， 本 节 主 要 讲述 它们 
的 原理 ， 后 面 会 介绍 它们 是 如 何 被 实现 的 。 


首先 介绍 一 个 学 术 解 释 ,“ 闭 包 是 一 个 拥有 许多 变量 和 绑 定 了 这 些 
变量 的 环境 的 表达 式 〈 通 单 是 一 个 函数 ) ， 因 而 这 些 变量 也 是 该 表达 
式 的 一 部 分 ”。 通 俗 来 说 ， 就 是 当 执行 到 一 条 语句 的 时 候 ， 哪 些 对 象 

(或 者 其 他 环境 因素 ) 能 够 被 使 用 。JavaScript 使 用 作用 域 链 来 实现 闭 
包 ， 作 用 域 链 由 执行 环境 维护 ，JavaScript 中 所 有 的 标识 符 都 是 通过 作 
用 域 链 来 查找 值 的 。 用 示例 来 解释 它们 比较 清楚 ， 示 例 代 码 9-4 是 两 段 
功能 类 似 但 是 影响 却 不 同 的 常见 JavaScript 代 码 ， 下 面 结合 闭 包 和 作用 
域 链 来 分 析 它 们 。 


假设 这 一 段 代 码 被 保存 在 一 个 单独 的 JS 文件 中 ， 当 某 个 包含 该 JS 
文件 的 网 页 运行 在 浏览 器 中 的 时 候 ，JavaScript 已 经 预先 创建 好 一 个 全 
局 的 域 ， 该 域 会 包含 一 个 全 局 的 上 下 文 ， 该 上 下 文 可 能 包含 window、 
navigator (网 页 中 ) 等 内 置 的 对 象 ， 同 时 也 包含 当前 执行 位 置 的 一 些 
言 息 。 例 如 代码 9-4 中 的 第 一 行 ， 当 执行 到 该 行 时 ， 就 定义 了 “me” 并 赋 


值 1， 上 下 文 就 包含 了 一 个 “me” 变 量 ， 接 下 来 的 语句 就 能 够 使 用 该 变 
量 。 图 9-3 中 的 全 局 上 下 文 就 包含 这 些 信 


add 函数 的 上 下 文 


Internal 函数 的 上 下 文 


图 9-3 ”示例 代码 9-4 中 左 侧 所 涉及 的 作用 域 链 


示例 代码 9-4 ”使 用 闭 包 技术 的 JavaScript 函 数 


var me = 1; var me = 1; 
function add(x) { (function (x) { 

var me = 2; var me = 2; 
function internal() { function internal() { 
return me + x; return me + x; 

} } 

return internal() + 3; return internal() + 3; 
} D(1); 

add(1); 


当 执 行 到 左边 第 二 行 的 时 候 ， 函 数 “add” 也 被 加 入 全 局 上 下 文中 
(事实 上 ， 这 有 两 个 阶段 ， 在 之 前 的 阶段 ，“add” 已 经 被 加 入 上 下 文 
中 ， 所 以 在 add” 函数 声明 之 前 使 用 它 也 是 可 以 的 ) ， 所 有 的 代码 都 能 
够 使 用 它 。 如 果 不 巧 在 它 之 前 也 有 同样 名 为 add 的 函数 ， 那 么 之 前 的 


水 数 会 被 覆盖 。 所 以 ， 假 如 我 们 并 不 希望 “add” 被 其 他 地 方 使 用 ， 而 且 
不 要 覆盖 之 前 的 水 数 ， 因 为 这 样 会 污染 全 局 空间 ， 造 成 不 必要 的 麻 
烦 。 一 个 正确 的 做 法 是 示例 代码 9-4 中 右 侧 的 使 用 方法 ， 稍 后 做 介绍 。 


在 “add" 函 数 中 ， 执 行 环境 同样 会 建立 一 个 该 函数 的 上 下 文 ， 包 含 
该 辫 数 中 的 心理 ， 例 如 第 三 行 ， 又 是 一 个 变量 “me”。 该 上 下 文 同时 会 
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行 环境 也 会 为 它 建 立 一 个 上 下 文 ， 如 图 9-3 中 右 下 角 的 上 下 文 ， 指 向 它 
的 父 上 下 文 ， 这 样 其 实 就 形成 了 一 个 作用 域 链 。 在 “internal” 函 数 内 
部 ， 它 使 用 了 变量 “me”。 首 先 ， 执 行 环境 检查 当前 的 上 下 文 ， 查 找 有 
无 变量 “me”， 当 然 在 本 例 中 无 法 找到 ， 于 是 它 会 接着 在 它 的 父 上 下 文 
中 查找 ， 显 然 “add” 阔 数 的 上 下 文中 包含 “me”， 所 以 不 需要 继续 向 上 查 
找 。 如 果 “add” 阔 数 上 下 文中 没有 包含 该 变量 ， 那 么 执行 环境 会 不 停 向 
上 查找 ， 直 到 找 遍 全 局 上 下 文 为 止 。 


下 面 解释 示例 代码 9-4 右 侧 函 数 的 好 处 。 当 包含 一 个 .js 文件 的 时 
候 ， 它 的 全 局 函数 在 其 他 .js 文件 中 也 可 见 ， 这 直接 导致 名 字 冲 突 和 模 
块 化 问题 。 因 为 没有 C++ 的 名 空间 机 制 和 Java 的 包机 制 ， 每 个 .js 文件 中 
的 函数 命名 可 能 相同 ， 这 直接 导致 名 冲突 。 当 开发 者 只 是 希望 该 <add” 
国 数 在 内 部 使 用 的 时 候 ， 那 么 他 可 以 像 右 侧 一 样 使 用 一 个 匿名 函数 ， 
然后 直接 调用 它 ， 这 样 这 个 函数 就 不 会 污染 全 局 空间 。 同 时 ， 匿 名 子 
数 内 部 也 使 用 了 一 个 内 部 函数 “internal”。 根 据 前 面 介绍 的 作用 域 链 技 
术 ,“internal" 函 数 只 在 该 匿名 冰 数 内 部 有 效 ， 完 全 不 会 影响 其 他 代 
码 ， 这 里 使 用 的 就 是 闭 包 技术 。 


9.1.2 ” JavaScript 引擎 


什么 是 JavaScript 引 擎 ? 简单 来 讲 ， 就 是 能 够 将 JavaScript 代 码 处 理 
并 执行 的 运行 环境 。 要 解释 这 一 概念 ， 需 要 了 解 一 些 编译 原理 的 基础 
概念 和 现代 语言 需要 的 一 些 新 编译 技术 。 


首先 来 看 C/C++ 语 言 。 由 前 面 描述 可 知 ， 处 理 该 语言 通 单 的 做 法 
实际 上 就 是 使 用 编译 器 直接 将 它们 编译 成 本 地 代码 ， 这 一 切 都 是 由 开 
发 人 员 在 代码 编写 完成 之 后 实施 的 ， 如 图 9-4 所 示 。 用 户 只 是 使 用 这 些 
编译 好 的 本 地 代码 ， 被 系统 的 加 载 器 加 载 执行 ， 这 些 本 地 代码 由 操作 
系统 调度 CPU 直接 执行 ， 无 须 额 外 处 理 。 


图 9-4 C++ 编译 器 生成 本 地 代码 的 过 程 


其 次 ， 来 看 看 Python 等 脚本 语言 。 处 理 脚 本 语言 通常 的 做 法 是 开 
发 者 将 写 好 的 代码 直接 交 给 用 户 ， 用 户 使 用 脚本 的 解释 器 将 脚本 文件 
加 载 然后 解释 执行 ， 如 图 9-5 所 示 。 当 然 ， 现 在 Python 也 可 以 支持 将 脚 
本 编译 生成 中 间 表 示 。 但 是 ， 通 单 情况 下 ， 脚 本 语言 不 需要 开 友 人 员 
去 编译 脚本 代码 ， 这 主要 是 因为 脚本 语言 对 使 用 场景 和 性 能 的 要 求 与 
其 他 类 型 的 语言 不 同 。 


抽象 语法 树 解释 器 解释 和 执行 


图 9-5 解释 器 解释 执行 过 程 


然后 来 看 看 Java 语 言 。 其 做 法 是 明显 的 两 个 阶段 ， 首 先是 像 
C++ 语 言 一 样 的 编译 阶段 ， 但 是 ， 同 C++ 编 译 器 生成 的 本 地 代码 结果 
不 同 ，Java 代 码 经 过 编译 器 编译 之 后 生成 的 是 字 节 码 ， 字 节 码 是 跨 平 
台 的 一 种 中 间 表 示 ， 不 同 于 本 地 代码 。 该 字 节 但 与 平台 无 天 ， 能 够 在 


不 同 操作 系统 上 运行 。 在 运行 字 节 码 阶 段 ，Java 的 运行 环境 是 Java 虚 
拟 机 加 载 字 节 码 ， 使 用 解释 器 执行 这 些 字 节 码 。 如 果 仪 是 这 样 ， 那 
Java 的 性 能 就 比 Ct+ 差 太 多 了 。 现 代 Java 虚 拟 机 一 般 都 引入 了 JIT 技 
术 ， 也 就 是 前 面 说 的 将 字 节 码 转 变 成 本 地 代码 来 提高 执行 效率 。 图 9-6 
描述 这 两 个 阶段 ， 第 一 阶段 对 时 间 要 求 不 严格 ， 第 二 阶段 则 对 每 个 步 
又 所 花费 的 时 间 非 常 敏感 ， 时 间 越 短 越 好 。 


Java 虚拟 机 


虚拟 机 垃圾 回收 等 》 


图 9-6 Java 代码 的 编译 和 执行 过 程 


最 后 回 到 JavaScript 语 言 上 来 。 前 面 已 经 说 了 它 是 一 种 解释 性 脚本 
语言 。 但 是 ， 众 多 工程 师 不 断 投 入 资源 来 提高 它 的 速度 使 得 它 能 够 使 
用 Java 虚 拟 机 和 C++ 编译 器 中 的 众多 技术 来 改进 工作 方式 。 早 期 也 是 
由 解释 器 来 解释 即 可 ， 就 是 将 源 代 码 转变 成 抽象 语法 树 ， 然 后 在 抽象 
语法 树 上 解释 执行 。 随 着 将 Java 虚 拟 机 的 JIT 技 术 引 入 ， 现 在 的 做 法 是 
将 抽象 语法 树 转 成 中 间 表 示 (也 就 是 字 节 码 ) ， 然 后 通过 JIT 技 术 转 成 
本 地 代码 ， 这 能 够 大 大 地 提高 执行 效率 。 当 然 也 有 些 直接 从 抽象 语法 
树 生成 本 地 代码 的 JIT 技 术 ， 例 如 V8。 这 是 因为 JavaScript 跟 Java 还 是 有 
以 下 一 些 区 别 的 。 


其 一 是 类 型 。JavaScript 是 无 类 型 的 语言 ， 其 对 于 对 象 的 表示 和 属 
性 的 访问 比 Java 存 在 更 大 的 性 能 损失 。 不 过 现在 已 经 出 现 了 一 些 新 的 


技术 ， 参 考 C++ 或 者 Java 的 类 型 系统 的 优点 ， 构 建 隐 式 的 类 型 信息 ， 


这 些 后 面 将 逐一 介绍 。 


其 二 ，Java 语 言 通 常 是 将 源 代码 编译 成 字 节 码 ， 这 同 执行 阶段 是 
分 开 的 ， 也 就 是 从 源 代码 到 抽象 语法 树 再 到 字 节 码 这 段 时 间 的 长 短 是 
无 所 谓 的 (或 者 说 不 是 特别 重要 ) ， 所 以 尽 可 能 地 生成 高 效 的 字 节 码 
即 可 。 而 对 于 JavaScript 而 言 ， 这 些 都 是 在 网 页 和 JavaScript 文 件 下 载 后 
同 执行 阶段 一 起 在 网 页 的 加 载 和 泻 染 过 程 中 来 实施 的 ， 所 以 对 它们 的 
处 理 时 间 也 有 着 很 高 的 要 求 。 


图 9-7 描 述 了 JavaScript 代 码 执 行 的 过 程 ， 这 一 过 程 中 因为 不 同 技术 
的 引入 ， 导 致 其 步骤 非 尝 复杂， 而 且 因为 都 是 在 代码 运行 过 程 中 来 处 
理 这 些 步 又 ， 所 以 每 个 阶段 的 时 间 越 少 越 好 ， 而 且 每 引入 一 个 阶段 都 
是 额外 的 时 间 开 销 ， 可 能 最 后 的 本 地 代码 执行 效率 很 高 ， 但 是 如 果 之 
前 的 步骤 耗费 太 多 时 间 ， 最 后 的 执行 结果 可 能 并 不 会 好 。 所 以 不 同 的 
JavaScript 引 擎 选择 了 不 同 的 路 径 ， 这 里 先 不 仔细 介绍 ， 后 面 再 描述 它 
们 ]。 


JavaScript 4| % 


垃圾 回收 器 ， 分 析 工 有 具 本 地 代码 


图 9-7 JavaScript 代码 的 编译 和 执行 过 程 


所 以 一 个 JavaScript 引 擎 不 外 平 包括 以 下 几 个 部 分 。 


。 编译 器 。 主 要 工作 是 将 源 代码 编译 成 抽象 语法 树 ， 在 某 些 引擎 中 
还 包含 将 抽象 语法 树 转换 成 字 节 码 。 

。 解释 器 。 在 某 些 引擎 中 ， 解 释 器 主要 是 接收 字 节 码 ， 解 释 执行 这 
个 字 节 码 ， 同 时 也 依赖 垃圾 回收 机 制 等 。 

。JIT 工 具 。 一 个 能 够 能 够 JIT 的 工具 ， 将 字 节 码 或 者 抽象 语法 树 转 
换 成 本 地 代码 ， 当 然 它 也 需要 依赖 牢记 

。 垃圾 回收 器 和 分 析 工 具 (Profiler) 。 它 们 负责 垃圾 回收 和 收集 
引擎 中 的 信息 ， 帮 助 改 善 引 擎 的 性 能 和 功效 。 


9.1.3 JavaScript 引擎 和 泻 染 引擎 


前 面 介 绍 了 网 页 的 工作 过 程 需要 使 用 两 个 引擎 ， 也 就 是 泻 染 引擎 
和 JavaScript 引 擎 。 从 模块 上 看 ， 它 们 是 两 个 独立 的 模块 ， 分 别 负 责 不 
同 的 事情 : JavaScript 引 擎 负责 执行 JavaScript 代 码 ， 而 泻 染 引擎 负责 泻 
染 网 页 。JavaScript 引 擎 提供 调用 接口 给 泻 染 引擎 ， 以 便 让 泻 染 引擎 使 
用 JavaScript 引 擎 来 处 理 JavaScript 代 码 并 获取 结果 。 这 当然 不 是 全 部 ， 
事情 也 不 是 这 么 简单 ，JavaScript 引 擎 需要 能 够 访问 泻 染 引擎 构建 的 
DOM 树 ， 所 以 JavaScript 引 稳 通 单 需要 提供 桥接 的 接口 ， 而 泻 染 引擎 则 
根据 桥接 接口 来 提供 让 JavaScript 访 问 DOM 的 能 力 。 在 现在 众多 的 
HTML5 能 力 中 ， 很 多 都 是 通过 JavaScript 接 口 提供 给 开发 者 的 ， 所 以 这 
部 分 同样 需要 根据 桥接 接口 来 实现 具体 类 ， 以 便 让 JavaScript 引 | 擎 能 够 
回调 泻 染 引 擎 的 具体 实现 。 图 9-8 描 述 了 两 种 引擎 之 间 的 相互 调用 关 
系 。 


基于 桥接 接口 的 实现 (DOM, HTMLS 功能 ) 


图 9-8 泻 染 引擎 和 JavaScript 引 擎 的 关系 


在 WebKit 中 ， 两 种 引擎 通过 桥接 接口 来 访问 DOM 结 构 ， 这 对 性 能 
来 说 是 一 个 重大 的 损失 因为 每 次 JavaScript 代 码 访问 DOM 都 需要 通过 复 
杂 和 低 效 的 桥接 接口 来 完成 。 鉴 于 访问 DOM 树 的 普遍 性 ， 这 是 一 个 常 
见 的 问题 。 


9.2 V85|# 
9.2.1 基础 


V8 是 一 个 开源 项 目 ， 也 是 一 个 JavaScript 引 | 擎 的 实现 。 它 最 开始 是 
由 一 些 语言 方面 的 专家 设计 出 来 的 ， 后 被 Google 收 购 ， 成 为 了 
JavaScript 引 擎 和 众多 相关 技术 的 引领 者 。 其 目的 很 简单 ， 就 是 为 了 提 
高 性 能 。 因 为 在 当时 之 前 的 JavaScriptCore 引 敬 和 其 他 的 JavaSscript 引 擎 
的 性 能 都 不 能 令 人 非常 满意 。 为 了 提高 JavaScript 代 码 的 执行 效率 从 而 
获得 更 好 的 网 页 浏览 效果 ， 它 甚至 采用 直接 将 JavaScript 编 译 成 本 地 代 
码 的 方式 。 


V8 支持 众多 的 操作 系统 ， 包 括 但 是 不 限于 Windows、Linux、 
Android, Mac OS X 等 。 同 时 它 也 能 够 支持 众多 的 人 硬件 架构 ， 例 如 
IA32、X64、ARM、MIPS 等 。 这 么 看 来 ， 它 将 主流 软 硬 件 平台 一 网 打 


尽 ， 由 于 它 是 一 个 开源 项 上 目 ， 开 发 者 可 以 自由 使 用 它 的 强大 能 力 ， 一 
个 例子 就 是 目前 炙手可热 的 NodeJs 项 目 ， 它 就 是 基于 V8 项 目 研发 的 。 
开源 的 好 处 就 是 大 家 可 以 很 方便 地 学 习 、 贡 献 和 使 用 ， 就 让 我 们 首先 
从 它 的 代码 结构 开始 。 


9.2.1.1 ”代码 结构 


V8 的 代码 量 超过 50 万 行 ， 应 该 也 算 一 个 中 型 的 项 目 ， 但 是 它 的 代 
码 结构 其 实 非 常 的 简单 ， 如 图 9-9 所 示 。 对 于 想 了 解 V8 的 读者 来 说 ， 
建议 将 目光 主要 放 在 两 个 主要 目录 “include”* 和 “src* 中 ， 它 们 一 个 是 包 
含 了 V8 对 外 的 接口 ， 一 个 是 包含 了 V8 内 部 的 实现 ， 其 他 都 是 一 些 辅 助 
的 工具 和 与 测试 相关 的 设施 。 图 9-9 中 只 列 出 了 一 些 主要 目录 和 文件 ， 
以 及 它们 的 介绍 ， 对 于 其 他 内 容 ， 读 者 可 以 自行 参阅 源 代码 加 以 理 


解 。 


V8 


include V8 接口 


v8.h 


v8-debug.h 


v8-profiler.h 


v8-testing.h 
— se V8 内 部 实现 
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1a32 


x64 


ast.h/ee 


d8.h/ce 


full-codegen.h/ce 


heap.h/ce 


该 文件 用 来 包含 V8 的 接口 


V8 调试 相关 的 接口 


V8 信息 收集 器 的 接口 


V8 测试 相关 的 接口 


ARM 后 端 ， 抽 象 语法 树 转 成 arm 指令 的 相关 代码 


IA32 后 端 ， 抽 象 语法 树 转 成 IA32 指令 的 相关 代码 


X64 后 端 ， 抽 象 语法 树 转 成 X64 指令 的 相关 代码 


抽象 语法 树 的 实现 


V8 的 一 个 调试 程序 


从 抽象 语法 树 生 成 本 地 代码 


V8 使 用 的 堆 实现 


extensions V8 扩展 机 制 
benchmarks JavaScript 性 能 测试 用 例 
build 编译 V8 项 目 相关 脚本 


图 9-9 ”V8 项 目的 代码 结构 


9.2.1.2 ”应 用 程序 编程 接口 (API) 


要 了 解 V8 的 内 部 工作 机 制 或 者 说 原理 ， 有 必要 先 了 解 V8 所 提供 的 
应 用 编程 接口 ， 它 们 在 V8 代码 目录 的 include/V8.h 中 ， 通 过 接口 中 的 某 
些 类 可 以 一 帘 V8 的 工作 方式 ， 其 中 一 些 主要 的 类 如 下 。 


各 种 各 样 的 基础 类 : 这 里 面包 含 对 象 引 用 类 (如 
WeakReferenceCallbacks) 、 基 本 数据 类 型 类 (如 Int32、Integer、 

Number, String, StringObject) 和 JavaScript 对 象 (Object) o 这 
些 都 是 基础 抽象 类 ， 没 有 包含 实际 的 实现 ， 真 正 的 实现 在 “src” 目 
录 中 的 “objects.h/cc”* 中 。 

Value : 所 有 JavaScript 数 据 和 对 象 的 基 类 ， 如 上 面 的 Integer、 

Number、 String 等 。 

V8 数据 的 句柄 类 : 以 上 数据 类 型 的 对 象 在 V8 中 有 不 同 的 生命 周 
期 ， 需 要 使 用 句柄 来 描述 它们 的 生命 周期 ， 以 及 垃圾 回收 器 如 何 
使 用 句柄 来 管理 这 些 数 据 ， 句 柄 类 包括 Local、Persistent 和 
Handleo 

Isolate : 这 个 类 表示 的 是 一 个 V8 引 擎 实例 ， 包 括 相 关 状 态 信息 、 

堆 等 ， 总 之 这 是 一 个 能 够 执行 JavaScript 代 码 的 类 ， 它 不 能 被 多 个 
线程 同时 访问 ， 所 以 ， 如 果 非 要 这 么 做 的 话 ， 需 要 使 用 锁 。V8 使 
用 者 可 以 使 用 创建 多 个 该 类 的 实例 ， 但 是 每 个 实例 之 间 就 像 这 个 
类 的 名 字 一 样 ， 都 是 孤立 的 。 

Context: 执行 上 下 文 ， 包含 内 置 的 对 象 和 方法 ， 如 print 方 法 等 ， 

还 包括 JavaScript 内 置 的 库 ， 如 math 等 。 

Extension : V8 的 扩展 类 。 用 于 扩展 JavaScript 接 口 ，V8 使 用 者 基 
于 该 类 来 实现 相应 接口 ， 被 V8 引擎 调用 。 

Handle: 句柄 类 ， 主 要 用 来 管理 基础 数据 和 对 象 ， 以 便 被 垃圾 回 
收 器 操作 。 主 要 有 两 个 类 型 ， 一 个 是 Local (就 是 Local 类 ， 继 承 
自 Handle 类 ) ， 另 一 个 是 Persistent (Persistent 类 ， 继 承 自 Handle 
X) 。 前 者 表示 本 地 栈 上 的 数据 ， 所 以 量 级 比较 轻 ， 后 者 表示 子 
数 间 的 数据 和 对 象 访问 。 

Script : 用 于 表示 被 编译 过 的 JavaScript 源 代码 ，V8 的 内 部 表示 。 


e HandleScope: 包含 一 组 Handle 的 容器 类 ， 帮 助 一 次 性 删除 这 些 
Handle， 避 免 重复 调用 。 

e FunctionTemplate : 绑 定 C++ 了 图 数 到 JavaScript， 了 因数 模板 的 一 个 
例子 就 是 将 JavaScript 接 口 的 C++ 实现 绑 定 到 JavaScript 引 擎 。 

。 ObjectTemplate : 绑 定 C++ 对 象 到 JavaScript， 对 象 模板 的 典型 应 
用 是 Chromium 中 将 DOM 节 点 通过 该 模板 包装 成 JavaScript 对 象 。 


读者 看 到 这 里 ， 可 能 对 一 些 类 的 描述 不 是 很 理解 ， 这 是 因为 缺少 
对 V8 中 一 些 基 本 概念 的 认识 ， 和 希望 后 面 的 解释 能 够 帮助 到 你 。 下 面 通 
过 一 个 例子 来 了 解 V8 使 用 者 是 如 何 调用 这 些 接口 以 使 用 V8 引 擎 来 执行 
JavaScript 代 码 的 。 


9.2.1.3 ”接口 使 用 示例 


通过 调用 这 些 编程 接口 和 对 应 的 内 存 管 理 方式 ， 希 望 读 者 能 够 初 
步 理解 V8 的 工作 方式 。 图 9-10 是 来 自 V8 项 目 官方 网 站 上 的 图 片 ， 主 要 
描述 使 用 V8 的 基本 流程 和 这 些 接口 对 应 的 内 存 管 理 方式 。 


Managed by the garbage collector 


1. HandleScope handle_scope (isolate); 


N 
m 


andle<Context> context = Context: :New (isolate); 


w 
中 


ersistent<Context> persistent_context(isolate, contex 
4. Context: :Scope context_scope (context) ; 


5. Handle<String> source obj = String: :New(argv[1]) ; 


6. Handle<Script> script obj = Script: :Compile(source_ob}) ; 


a 
m 


landle<Value> local_result = script obj->Run(); 


图 9-10 ”调用 V8 编程 接口 的 例子 和 对 应 的 内 存 管 理 方式 


中 没有 描述 如 何 创建 一 个 Isolate 对 象 ， 此 对 象 可 以 通过 
Isolate::GetCurrent() 来 获取 ， 它 会 创建 一 个 V8 引擎 示例 ， 后 面 的 操作 
都 是 在 它 提供 的 环境 中 来 进行 的 。 


图 中 第 一 条 语句 表示 建立 一 个 域 ， 前 面 也 介绍 了 ， 用 于 包含 一 组 
Handle 对 象 ， 便 于 释放 它们 。 


中 第 二 条 语句 根据 Isolate 对 象 来 获取 一 个 Context 对 象 ， 使 用 
Handle 来 管理 。Handle 对 象 本 身 存 放 在 栈 上 ， 而 实际 的 Context 对 象 保 
存在 堆 中 。 


图 中 第 三 条 语句 根据 两 个 对 象 Isolate 和 Context 来 创建 一 个 图 数 间 
使 用 的 对 象 ， 所 以 使 用 Persistent 类 来 管理 ， 这 里 展示 的 是 它 的 用 处 和 
含义 ， 在 本 例 中 不 是 必需 的 。 读 者 可 以 看 到 它 的 句柄 和 数据 都 单独 存 
储 在 另外 的 地 方 。 


图 中 第 四 条 表示 为 Context 对 象 创建 一 个 基于 栈 的 域 ， 下 面 的 执行 
步骤 都 是 在 该 域 中 对 应 的 上 下 文中 来 进行 的 。 


图 中 第 五 条 是 从 命令 行 参数 读 入 JavaScript 代 码 ， 也 就 是 一 段 字符 
Fo 


中 第 六 条 将 代码 字符 串 编译 成 V8 的 内 部 表示 ， 并 保存 成 一 个 
Script 对 象 。 


图 中 第 七 条 是 执行 编译 后 的 内 部 表示 ， 然 后 获得 生成 的 结果 。 


一 个 典型 的 使 用 V8 编程 接口 的 例子 就 是 V8 项 目 提供 的 D8 工具 。 
它 通 过 V8 的 接口 来 实现 一 个 可 执行 程序 ， 因 为 V8 本 身 只 是 一 个 C++ 库 
而 已 。 该 可 执行 程序 能 够 帮助 V8 的 使 用 者 做 各 种 基础 测试 和 分 析 ， 能 


够 读 入 JavaScript 文 件 并 输出 结果 ， 以 及 提供 调试 JavaScript 的 基础 能 
力 。 


9.2.22 ”工作 原理 
9.2.2.1 ”数据 表示 


大 家 知道 在 JavaScript 语 言 中 ， 只 有 基本 数据 类 型 Boolean、 
Number、String、Nul 和 Undefined， 其 他 数据 都 是 对 象 ，V8 使 用 一 种 
特殊 的 方式 来 表示 它们 。 


在 V8 中 ， 数 据 的 表示 分 成 两 个 部 分 ， 第 一 部 分 是 数据 的 实际 内 
容 ， 它 们 是 变 长 的 ， 而 且 内 容 的 类 型 也 不 一 样 ， 如 String、 对 象 等 。 第 
二 个 部 分 是 数据 的 句柄 ， 句 柄 的 大 小 是 固定 的 ， 句 柄 中 包含 指向 数据 
的 指针 。 为 什么 会 是 这 种 设计 呢 ? 主要 是 因为 V8 需 要 进行 垃圾 回收 ， 
并 需要 移动 这 些 数据 内 容 ， 如 果 直接 使 用 指针 的 话 就 会 出 问题 或 者 需 
要 比较 大 的 开销 ， 使 用 句柄 的 话 就 不 存在 这 些 问 题 ， 只 需要 将 句柄 中 
的 指针 修改 即 可 ， 使 用 者 使 用 的 还 是 句柄 ， 它 本 身 没 有 发 生变 化 。 


除了 极 少数 的 数据 例如 整形 数据 ， 其 他 的 内 容 都 是 从 堆 中 申请 内 
存 来 存储 它们 ， 这 是 因为 Handle 本 身 能 够 存储 整形 ， 同 时 也 为 了 快速 
访问 。 而 对 于 其 他 类 型 ， 受 限于 Handle 的 大 小 和 变 长 等 原因 ， 都 存储 
在 堆 中 。 


下 面 我 们 来 看 一 看 句柄 是 如 何 区 分 这 些 类 型 的 。 图 9-11 描 述 了 名 
柄 在 32 位 和 64 位 机 器 上 的 表示 方式 。 


图 9-11 Handle 类 的 定义 ， 小 整数 和 其 他 类 型 表示 


由 上 面 Handle 的 定义 可 以 看 出 ， 一 个 Handle 对 象 的 大 小 是 4 字 节 
(32 位 机 器 ) 或 者 8 字 节 (64 位 机 器 ) ， 这 一 点 不 同 于 JavaScriptCore 
引擎 ， 后 者 是 使 用 8 个 字 节 来 表示 数据 的 句柄 。 整 数 (小 整数 ， 因 为 只 
有 31 位 能 表示 ) 直接 从 value_ 中 获取 值 ， 而 无 须 从 堆 中 分 配 ， 然 后 使 
用 一 个 指针 指向 它 ， 这 可 以 减少 内 存 的 使 用 并 增加 数据 的 访问 速度 。 
而 对 于 其 他 类 型 ， 则 使 用 一 个 指针 来 指向 它 在 堆 中 的 数据 。 


因为 堆 中 存放 的 对 象 都 是 4 字 节 对 齐 的 ， 所 以 指向 它们 的 指针 的 最 
后 两 位 都 是 00， 所 以 这 两 位 其 实 是 不 需要 的 。 在 V8 中 ， 它 们 被 用 来 表 
示 句 柄 中 包含 数据 的 类 型 。 


JavaScript 对 象 的 实现 在 V8 中 包含 3 个 成 员 ， 正 如 图 9-12 中 所 描述 
的 那样 ， 第 一 个 是 隐藏 类 的 指针 ， 这 是 V8 为 JavaScript 对 象 创建 的 隐藏 
类 。 第 二 个 指向 这 个 对 象 包含 的 属性 值 。 第 三 个 指向 这 个 对 象 包 含 的 
元 素 。 


JavaScript 对 象 包含 的 三 个 


指针 


元 素 表 指针 


图 9-12 ”JavaScript 对 象 内 部 表示 


9.2.2.2 V8 工作 过 程 


根据 前 面 的 介绍 ， 我 们 对 于 V8 工作 的 整个 过 程 应 该 有 了 一 个 大 概 
的 理解 ， 该 过 程 包括 两 个 阶段 ， 第 一 是 编译 ， 第 二 是 运行 。 只 不 过 鉴 
于 JavaScript 语 言 的 工作 方式 ， 它 们 都 是 在 用 户 使 用 它们 的 时 候 发 生 。 
同时 ，V8 中 还 有 一 个 非常 重要 的 特点 就 是 延迟 (deferred) 思想 ， 这 
使 得 很 多 JavaScript 代 码 的 编译 直到 运行 的 时 候 被 调用 到 才 会 发 生 ， 这 
样 可 以 减少 时 间 开 销 。 


首先 来 看 编译 阶段 。 读 者 应 该 了 解 JavaScript 引 擎 是 如 何 将 源 代码 
解释 执行 或 者 转化 为 本 地 代码 的 。 同 JavaScriptCore 引 | 擎 比较 ，V835| 擎 
有 自己 特殊 的 地 方 ， 如 图 9-13 所 示 为 从 产 代 码 到 最 后 本 地 代码 的 过 
程 。 


抽象 语法 树 


解析 器 JIT 全 代码 生成 器 


本 地 代码 
一 一 一 一 > 


根据 数据 分 析 器 来 进 
步 优化 
图 9-13 V83 引 | 掌 处 理 源 代码 到 本 地 代码 的 过 程 


从 图 中 可 以 看 出 ， 首 先 它 也 是 将 源 代码 转变 成 抽象 语法 树 的 ， 这 
一 所 同 JavaScriptCore 引 | 擎 一 样 ， 之 后 两 个 引擎 开始 分 道 扬 贸 。 不 同 于 
JavaScriptCore 引 擎 ，V83 引 | 擎 并 不 将 抽象 语法 树 转变 成 字 节 码 或 者 其 他 
中 间 表 示 ， 而 是 通过 JIT 编 译 器 的 全 代码 生成 器 (full code generator) 


从 抽象 语法 树 直 接生 成 本 地 代码 ， 所 以 没有 像 Java 一 样 的 虚拟 机 或 者 
字 节 码 解 释 器 。 这 样 做 的 原因 ， 主 要 是 因为 减少 抽象 语法 树 到 字 节 码 
的 转换 上 时间， 这 一 切 都 在 网 页 加 载 时 完成 ， 虽 然 可 以 提高 优化 的 可 
能 ， 但 是 这 些 分 析 可 能 带 来 巨大 的 时 间 浪 费 。 当 然 ， 缺 点 也 很 明显 ， 
至 少 包 括 两 点 : 第 一 是 在 某 些 JavaScript 使 用 场景 其 实 使 用 解释 器 更 为 
合适 ， 因 为 没有 必要 生成 本 地 代码 ; 第 二 是 没有 中 间 表 示 会 减少 优化 
的 机 会 ， 因 为 缺少 一 个 中 间 表 示 层 。 至 于 有 些 文 章 说 的 坟 失 了 移植 
性 ， 个 人 觉得 对 于 JavaScript 这 种 语言 来 说 不 是 问题 ， 因 为 并 没有 将 
JavaScript 代 码 先 编译 然后 再 运行 的 明显 两 个 阶段 分 开 的 用 法 ， 例 如 像 
Java 语 言 那样 。 但 是 ， 针 对 V8 设 计 思 想来 说 ， 笔 者 认为 它 的 理念 比较 
先进 ， 做 法 虽然 比较 激进 ， 但 是 确实 给 JavaScript 引 擎 设计 者 们 襄 来 很 
多 新 思路 。 


下 面 来 看 一 看 V8 引 擎 编译 JavaScript 生 成 本 地 代码 (也 称 为 IT 编 
译 ) 使 用 了 哪些 主要 的 类 和 过 程 。 图 9-14 给 出 了 主要 的 类 ， 下 面 逐 一 
RAMEN. 


。 Script: 表示 是 JavaScript 代 码 ， 既 包含 源 代 码 ， 又 包含 编译 之 后 
生成 的 本 地 代码 ， 所 以 它 既 是 编译 入 口 ， 又 是 运行 入 口 。 

e Compiler : 编译 器 类 ， 辅 助 Script 类 来 编译 生成 代码 ， 它 主要 起 
一 个 协调 者 的 作用 ， 会 调用 解释 器 (Parser) 来 生成 抽象 语法 树 和 
全 代码 生成 器 ， 来 为 抽象 语法 树 生 成 本 地 代码 。 

e Parser : 将 源 代 码 解 释 并 构建 成 抽象 语法 树 ， 使 用 
AstNodeFactory 类 来 创建 它们 ， 并 使 用 Zone 类 来 分 配 内 存 ， 这 个 
在 后 面 内 存 管理 中 介绍 。 

。 AstNode : 抽象 语法 树 节 点 类 ， 是 其 他 所 有 节点 的 基 类 ， 它 包含 
非常 多 的 子 类 ， 后 面 会 针对 不 同 的 子 类 生成 不 同 的 本 地 代码 。 


e AstVisitor : 抽象 语法 树 的 访问 者 类 ， 基 于 著名 的 设计 模式 Visitor 
来 设计 ， 主 要 用 来 损 历 异 构 的 抽象 语法 树 。 

e FullCodeGenerator : AstVisitor 类 的 子 类 ， 通 过 遍历 抽象 语法 树 
来 为 JavaScript 生 成 本 地 可 执行 的 代码 。 


Script AstNodeFactory Zone 
+New() +NewBlockType() +New() 
at 


+Run() 不 mets Gi e 不 
T 1 ~ 
I 


上 
Parser 


+ParseProgram() | 


FullC odeGenerator 


+MakeCode() +VisitModuleLiteraltype() 
+Generate() +VisitBlocktype() 


图 9-14 V8 编译 器 涉及 的 主要 类 


根据 上 面 类 的 描述 ， 我 们 大 致 可 以 描绘 出 这 样 一 个 编译 JavaScript 
代码 的 过 程 : Script 类 调用 Compiler 类 的 Compile 国 数 为 其 生成 本 地 代 
码 。 在 该 水 数 中 ， 第 一 ， 它 使 用 Parser 类 来 生成 抽象 语法 树 ; 第 二 ， 使 
用 FullCodeGenerator 类 来 生成 本 地 代码 。 根 据 前 面 拉 述 的 延迟 编译 的 
思想 ， 事 实 上 ，JavaScript 中 的 很 多 函数 是 没有 被 编译 生成 本 地 代码 
的 。 因 为 JavaScript 代 码 编译 之 前 需要 构建 一 个 运行 环境 ， 所 以 实际 上 
在 编译 之 前 ，V83 引 | 擎 会 构建 众多 全 局 对 象 并 加 载 一 些 内 置 的 库 ， 如 
math 库 等 。 


对 于 编译 器 的 全 代码 生成 器 来 说 ， 因 为 本 地 代码 跟 具 体 的 硬件 平 
台 密 切 相 关 ， 所 以 它 使 用 多 个 后 端 来 生成 实际 的 代码 ， 如 图 9-15 所 示 
的 过 程 。V85 引 擎 至 少 包 含 四 个 跟 平台 相关 的 后 端 ， 用 于 生成 不 同 平台 
上 的 本 地 汇编 代码 。 


抽象 语法 树 


X64 汇编 代码 


全 代码 生成 器 


MIPS 汇编 代码 


图 9-15 ”V8 代码 生成 器 生成 本 地 代码 


代码 生成 器 在 不 同 的 平台 上 有 不 同 的 实现 。 例 如 在 IA32 平 台 ， 读 
者 会 发 现代 码 生 成 器 中 的 函数 是 根据 该 平台 的 需求 而 实现 的 。 对 于 
ARM 平 台 ， 同 样 有 自己 的 实现 。 


当代 码 生 成 器 遍历 AST 树 的 时 候 ，FullCodeGenerator 会 为 每 个 节 
点 生成 相应 的 汇编 代码 ， 不 过 没有 了 全 局 的 视图 ， 因 此 没有 为 节点 之 
间 考 虑 可 能 的 优化 。 在 不 同 的 平台 上 ，FullCodeGenerator 的 很 多 函数 
有 不 同 的 实现 ， 它 们 在 full-codegen-ia32.cc、full-codegen-x64.cc、full- 
codegen-arm.cc 和 full-codegen-mips.cc 文 件 中 分 别 作 了 不 同 的 实现 。 


图 9-13 中 ，V8 在 生成 本 地 代码 之 后 ， 为 了 性 能 考虑 ， 通 过 数据 分 
析 器 (Profile) 来 采集 一 些 信 息 ， 以 帮助 决策 哪些 本 地 代码 需要 优 
化 ， 以 生成 效率 更 高 的 本 地 代码 ， 这 是 一 个 逐步 改进 的 过 程 。 同 时 ， 
V8 中 还 有 一 种 机 制 ， 也 就 是 当 发 现 优化 后 的 代码 性 能 其 实 并 没有 提高 
甚至 还 有 所 降低 ， 那 么 V8 能 够 退回 到 原来 的 代码 ， 这 些 都 是 在 运行 阶 
及 涉及 到 的 技术 。 


下 面 来 看 一 下 代码 的 运行 阶段 。 首 先 依然 是 运行 阶段 的 主要 类 ， 
图 9-16 描 述 了 V8 支持 JavaScript 代 码 运 行 的 主要 类 。 


| Seript O | Execution | 
Rait O aa a a a aN +Call() 


MarkCompactCollector | | Heap | 
+MigrateObject() ~~] +allocateJS Object() i -generatedCode 


A A 


SweeperThread | Runtme | 


图 9-16 V8 引 擎 运行 JavaScript 代 码 的 主要 类 


Script: 这 个 前 面 已 经 介绍 过 ， 包 含 编译 之 后 生成 的 本 地 代码 ， 
运行 代码 的 入 口 。 

Execution : 运行 代码 的 辅助 类 包含 一 些 重要 的 函数 ， 例 如 “Call” 
国 数 ， 它 辅助 进入 和 执行 Script 中 的 本 地 代码 。 

JSFunction : 需要 执行 的 JavaScript 峭 数 表示 类 。 

Runtime : 运行 这 些 本 地 代码 的 辅助 类 ， 它 的 功能 主要 是 提供 运 
行 时 各 种 各 样 的 辅助 水 数 ， 包 括 但 是 不 限于 属性 访问 、 类 型 转 
换 、 编 译 、 算 术 、 位 操作 、 比 较 、 正 则 表达 式 等 。 

Heap : 运行 本 地 代码 需要 使 用 内 存 堆 ， 堆 的 内 部 构成 和 结构 相当 
复杂 ， 这 个 在 后 面 的 内 存 管理 中 会 介绍 。 
MarkCompactCollector : 垃圾 回收 机 制 的 主要 实现 类 ， 用 来 标记 
(Mark) 、 清 除 (Sweep) 和 整理 (Compact) 等 基本 的 垃圾 回收 
过 程 。 


SweeperThread : 负责 垃圾 回收 的 线程 。 


结合 这 些 类 ，V85 引 和 警 是 按照 图 9-17 中 描述 的 过 程 来 执行 的 。 当 然 
实际 上 的 过 程 更 为 复杂 ， 而 且 还 有 垃圾 回收 等 处 理 ， 下 面 主 要 描述 了 
几 个 基本 的 可 能 会 被 调用 的 函数 。 


调用 发 生 在 图 中 的 三 个 子 阶 段 。 第 一 就 是 延迟 编译 ， 也 就 是 
“CompileLazy” 这 个 函数 的 调用 ， 根 据 需要 编译 和 生成 这 些 本 地 代码 的 
时 候 ， 实 际 上 也 是 在 使 用 编译 阶段 那些 类 和 操作 。 这 一 思想 同样 被 广 
泛 应 用 在 WebKit 和 Chromium 项 目 中 。 在 V8 中 ， 闻 数 是 一 个 基本 单 
位 。 当 某 个 JavaScript 国 数 被 调用 的 时 候 ， 属 于 该 永 数 的 本 地 代码 就 会 
生成 。 具 体 工作 的 方式 是 V8 查找 该 水 数 是 否 已 经 生成 本 地 代码 ， 如 果 
已 经 生成 ， 那 么 直接 调用 该 疯 数 。 否 则 ，V85| 黎 会 触发 生成 本 地 代 
码 ， 目 的 当然 是 节约 时 间 ， 减 少 去 处 理 那些 使 用 不 到 的 代码 的 时 间 。 
第 二 就 是 图 9-17 中 的 1.2.3， 这 时 执行 编译 后 的 代码 就 是 为 JavaScript 构 
建 JS 对 象 ， 这 需要 Runtime 类 来 辅助 创建 对 象 ， 并 需要 从 Heap 类 分 配 内 
存 。 第 三 就 是 图 9-17 中 的 1.2.4， 此 阶段 需要 借助 Runtime 类 中 的 辅助 函 
数 来 完成 一 些 功能 ， 如 属性 访问 、 类 型 转换 等 。 


Script Execution JSFunction Runtime Heap Compiler 


1: Call 


.2]1: CompileLazy 


图 9-17 V8 引擎 中 的 代码 执行 过 程 


因为 V8 是 基于 抽象 语法 树 直 接生 成 本 地 代码 ， 没 有 中 间 表 示 层 
( 字 节 码 ) ， 所 以 很 多 时 候 代码 没有 经 过 很 好 的 优化 。 关 于 JavaScript 


引擎 的 性 能 之 争 非 常 激烈 ， 没 有 经 过 优化 的 代码 导致 该 引擎 在 性 能 上 
没有 特别 大 的 突破 ， 而 其 他 引擎 都 在 进步 。 有 鉴于 此 ， 在 2010 年 ，V8 
引入 了 新 的 编译 器 ， 这 就 是 Crankshaft 编 译 器 ， 它 主要 针对 那些 热点 了 
数 进 行 优 化 。 该 编译 器 基于 JavaScript 源 代码 开始 分 析 ， 而 不 是 本 地 代 
码 ， 同 时 构建 Hydrogen 图 并 基于 此 来 进行 优化 分 析 ，Hydrogen 图 包括 
超过 132 条 指令 。 鉴 于 它 的 复杂 性 ， 这 里 不 再 详细 介绍 ， 有 兴趣 的 读者 
请 目 行 探索 。 


9.2.2.3 ”优化 回 滚 (Deoptimization) 


前 面 提 到 V8 引 擎 为 了 性 能 上 的 优化 ， 引 入 了 更 为 高 效 的 
Crankshaft 编 译 器 。 但 是 为 了 性 能 考虑 ， 该 编译 器 通常 会 做 比较 乐观 和 
大 胆 的 预测 ， 那 就 是 编译 器 认为 这 些 代 码 比 较 稳 定 ， 变 量 类 型 不 会 发 
生 改 变 ， 所 以 能 够 生成 高 效 的 本 地 代码 。 当 然 这 是 理想 情况 ， 现 实 是 
引擎 会 发 现 一 些 变量 的 类 型 已 经 发 生变 化 。 在 这 种 情况 下 ，V8 使 用 一 
种 机 制 来 将 它 做 的 这 些 错误 决定 回 滚 到 之 前 的 一 般 情 况 ， 这 个 过 程 称 
为 优化 回 滚 。 


下 面 举 个 例子 来 说 明 为 什么 会 出 现 这 种 情况 吧 。 示 例 代码 9-5 介 绍 
了 其 中 一 种 情况 ， 阔 数 ABC 补 调用 很 多 次 之 后 ，V8 引 擎 可 能 会 触发 
Crankshaft 编 译 器 来 生成 优化 的 代码 ， 优 化 的 代码 认为 示例 代码 的 类 型 
等 信息 都 已 经 被 获知 了 。 但 事实 上 ， 到 目前 为 止 ， 我们 对 于 代码 中 的 
unknown 变 量 的 类 型 还 一 无 所 知 ， 在 这 种 情况 下 ，V8 只 能 将 该 段 代码 
回 深 到 一 个 通用 的 状态 。 


示例 代码 9-5 ”会 触发 优化 回 滚 的 代码 示例 


var counter = 0; 
function ABC(x, y) { 
counter++; 
if (counter < 10000000) { 
// do sth 
return 123; 
} 
var unknown = new Date(); 
print (unknown) ; 


} 


优化 回 滚 是 一 个 很 费时 的 操作 ， 所 以 能 够 不 回 滚 ， 肯 定 不 要 回 
滚 ， 而 且 回 滚 会 将 之 前 优化 的 代码 恢复 到 一 个 没有 经 过 特别 优化 的 代 
码 ， 这 是 一 个 非常 不 高 效 的 过 程 ， 写 代码 的 时 候 要 特别 注意 尽量 不 要 
触发 这 一 过 程 。 


9.2.2.4 ”隐藏 类 和 内 妖 缓 存 


虽然 JavaScript 语 言 中 没有 类 型 的 定义 ， 那 么 借助 于 C++ 类 的 思 
想 ， 是 不 是 也 能 够 为 JavaScript 的 对 象 构 建 类 型 信息 呢 ? 当然 可 以 ， 至 
少 部 分 可 以 。V8 使 用 类 和 偏 移 位 置 思 想 ， 将 本 来 需要 通过 字符 串 匹 配 
来 查找 属性 值 的 算法 改进 为 使 用 类 似 C++ 编 译 器 的 偏 移 位 置 的 机 制 来 
实现 ， 这 就 是 隐藏 类 (Hidden Class) 。 隐 藏 类 将 对 象 划分 成 不 同 的 
组 ， 对 于 相同 的 组 ， 也 就 是 该 组 内 的 对 象 拥有 相同 的 属性 名 和 属性 值 


的 情况 ， 将 这 些 属性 名 和 对 应 的 偏 移 位 置 保存 在 一 个 隐藏 类 中 ， 组 内 
的 所 有 对 象 共 享 该 信息 。 同 时 ， 也 可 以 识别 属性 不 同 的 对 象 。 


这 听 起 来 可 能 比较 抽象 ， 所 以 使 用 如 图 9-18 这 样 的 例子 来 加 以 说 
明 。 图 中 这 一 解释 来 自 于 V8 的 官方 文档 说 明 ， 下 面 将 逐一 解释 它们 。 


ra = new ABC(1,1); 


ar b = new ABC(2,2); 


图 9-18 JavaScript 对 象 归 类 和 隐藏 类 


因为 JavaScript 没 有 办 法 定义 类 型 ， 所 以 图 9-18 中 左 半 部 分 使 用 疗 
数 来 定义 。 同 时 ， 创 建 了 两 个 对 象 a 和 b。 这 两 个 对 象 包含 相同 的 
属性 名 ， 在 V8 中 ， 它 们 被 归 为 同一 个 组 ， 也 就 是 隐藏 类 ， 这 些 属性 在 
隐藏 类 中 有 相同 的 偏 移 值 。 这 样 ， 对 象 a 和 b 可 以 共享 这 个 类 型 信息 ， 
当 访 问 这 些 对 象 属性 的 时 候 ， 根 据 隐藏 类 的 偏 移 值 就 可 以 知道 它们 的 
位 置 并 进行 访问 。 因 为 JavaScript 是 动态 类 型 语言 ， 所 以 假如 在 上 述 代 
码 之 后 ， 加 入 下 面 的 代码 : b.z = 2。 那 么 ，b 所 对 应 的 将 是 一 个 新 的 隐 
藏 类 ， 这 样 a 和 b 将 属于 不 同 的 组 。 


在 理解 了 V8 的 隐藏 类 之 后 ， 下 面 了 解 一 下 代码 是 如 何 使 用 这 些 隐 
藏 类 来 高 效 访问 对 象 的 属性 的 。 以 这 段 简单 代码 为 例 来 说 明 : function 
add(a) { return a.x; }。 首 先 看 最 基本 的 情况 ， 访 问 对 象 属性 的 过 程 是 这 
样 的 : 首先 获取 隐藏 类 的 地 址 ， 然 后 根据 属性 名 查找 偏 移 值 ， 计 算 该 
属性 的 地 址 。 不 过 ， 这 一 过 程 比较 费时 间 。 实 际 上 的 情况 可 能 要 好 很 


多 ， 因 为 很 多 情况 下 该 水 数 中 的 参数 a 可 能 是 同一 种 类 型 ， 那 么 是 否 能 
够 使 用 缓存 机 制 呢 ? 


是 的 ， 该 缓存 机 制 叫 做 内 许 缓 存 (Inline Cache) ， 它 可 以 避免 方 
法 和 属性 被 存 取 的 时 候 出 现 的 因 哈 希 表 碍 找 而 市 来 的 问题 。 该 机 制 的 
基本 思想 是 将 使 用 之 前 查找 的 结果 缓存 起 来 ， 也 就 是 说 V8 可 以 将 之 前 
查找 的 隐藏 类 和 仿 移 值 保 存 下 来 。 当 下 次 碍 找 的 时 候 ， 首 先 比 较 当 前 
对 象 是 否 也 是 之 前 的 隐藏 类 ， 如 果 是 的 话 ， 可 以 直接 使 用 之 前 缓存 的 
偏 移 值 ， 从 而 减少 查找 表 的 时 间 。 


当然 ， 如 果 该 立 数 中 的 对 象 a 出 现 多 个 类 型 ， 那 么 缓存 失误 的 机 率 
就 会 高 很 多 。 当 出 现 缓存 失误 的 时 候 ，V8 可 以 按照 上 面 说 的 ， 退 回 到 
之 前 的 方式 来 查找 哈 希 表 。 但 是 因为 效率 问题 ，V8 会 在 缓存 失败 之 
后 ， 通 过 对 象 a 的 隐藏 类 来 查找 该 类 有 无 一 段 代码 ， 这 段 代 码 可 以 快速 
查找 对 象 ， 其 实 就 如 示例 代码 9-6 所 示 ， 这 段 代码 就 是 保存 在 a 对 象 的 
隐藏 类 对 应 的 表 中 ， 所 以 如 果 该 段 代码 已 经 生成 ， 就 同样 可 以 较 快 地 
实现 属性 值 的 查找 。 


示例 代码 9-6 PHARM REAP 


if (a->hiddenClass() == cachedClass) { 


return a->properties[cachedOffset ]; 


} else { 
.，V/ 退 回 到 原来 的 方法 


9.2.2.5 ”内 存 管 理 


V8 的 内 存 管理 部 分 主要 讲 两 点 ， 第 一 是 V8 内 存 的 划分 ， 第 二 是 
V8 对 于 JavaScript 代 码 的 垃圾 回收 机 制 |。 


对 于 内 存 的 划分 ， 首 先 看 Zone 类 ， 它 的 特点 主要 是 管理 一 系列 的 
小 块 内存 。 如 果 用 户 想 使 用 一 系列 的 小 内 存 ， 并 且 这 些小 内 存 的 生命 
周期 类 似 ， 这 时 可 以 使 用 一 个 Zone 对 象 ， 这 些小 内 存 都 是 从 Zone 对 象 
中 申请 的 。 Zone 对 象 首 先 自己 申请 一 块 内 存 ， 然 后 管理 和 分 配 一 些小 
内 存 。 当 一 块 小 内 存 被 分 配 之 后 ， 不 能 够 被 Zone 回收 ， 只 能 一 次 性 回 
收 Zone 分 配 的 所 有 小 块 内存 。 例 如 抽象 语法 树 的 内 人 存 分 配 和 使 用 ， 在 
构建 抽象 语法 树 之 后 ， 会 生成 本 地 代码 ， 然 后 抽象 语法 树 的 内 存在 这 
之 后 被 一 次 性 全 部 收回 ， 效 率 非常 高 。 但 是 ， 该 机 制 有 一 个 非常 严重 
的 缺陷 ， 那 就 是 假如 这 一 个 过 程 需 要 很 多 的 内 存 ， 那 么 Zone 就 需要 为 
系统 分 配 大 量 的 内 存 ， 但 是 又 不 能 够 释放 ， 所 以 这 会 导致 系统 出 现 需 
要 过 多 的 内 存 而 导致 内 存 不 够 的 情况 。 


其 次 是 堆 。V8 使 用 堆 来 管理 JavaScript 使 用 的 数据 ， 以 及 生成 的 代 
码 、 哈 希 表 等 ， 为 了 更 方便 地 实现 垃圾 回收 ， 同 很 多 虚拟 机 一 样 ，V8 
将 堆 分 成 三 个 部 分 ， 第 一 个 是 年 轻 分 代 ， 第 二 个 是 年 老 分 代 ， 其 中 还 
分 成 多 个 子 部 分 ， 第 三 个 是 为 大 对 象 保留 的 空间 。 图 9-19 分 别 描述 了 
这 三 个 部 分 。 


图 9-19 V8 中 堆 的 划分 


对 于 年 轻 分 代 ， 主 要 是 为 新 创建 的 对 象 分 配 内 存 空 间 ， 因 为 年 轻 
分 代 中 的 对 象 较 容 易 被 要 求 回收 ， 为 了 方便 垃圾 回收 ， 可 以 使 用 复制 
方式 ， 将 年 轻 分 代 分 成 两 半 ， 一 半 用 来 分 配 ， 另 外 一 半 在 回收 的 时 候 
负责 将 之 前 还 需要 保留 的 对 象 复制 过 来 。 对 于 年 轻 分 代 ， 经 常 需要 进 
行 垃圾 回收 。 而 对 于 年 老 分 代 ， 主 要 是 根据 需要 将 年 老 的 对 象 、 指 
针 、 代 码 等 数据 使 用 的 内 存 较 少 地 做 垃圾 回收 。 而 对 于 大 对 象 空间 ， 
主要 是 用 来 为 那些 需要 使 用 较 多 内 存 的 大 对 象 分 配 内 存 ， 当 然 同 样 可 
能 包含 数据 和 代码 等 分 配 的 内 存 ， 需 要 注意 的 是 每 个 页 面 只 分 配 一 个 
对 象 。 


对 于 垃圾 回收 ， 因 为 使 用 了 分 代 和 大 数据 的 内 存 分 配 ，V8 需 要 使 
用 精简 整理 的 算法 ， 用 来 标记 那些 还 被 引用 的 对 象 ， 然 后 消除 那些 没 
有 被 标记 的 对 象 ， 最 后 整理 和 压缩 (Compact) 那些 还 需要 保存 的 对 
象 。 在 目前 的 虚拟 机 中 ， 垃 圾 回收 机 制 已 经 发 展 得 越 来 越 先 进 ， 我 们 
有 理由 相信 ，V8 将 引入 更 多 的 垃圾 回收 优化 算法 ， 如 并 发 机 制 等 ， 以 
后 可 以 使 用 并 发 标记 、 并 发 内 存 回收 等 。 其 中 一 些 技术 已 经 被 实现 ， 
之 后 还 会 有 更 多 技术 被 引入 。 


9.2.2.6 ”快照 (Snapshot) 


前 面 介 绍 到 ， 在 V8 引 擎 开始 启动 的 时 候 ， 需 要 加 载 很 多 内 置 的 全 
局 对 象 ， 同 时 也 要 建立 内 置 的 函数 ， 如 Array、String、Math 等 。 为 了 
让 引擎 更 加 整洁 ， 加 载 对 象 与 建立 函数 等 任务 都 是 使 用 JS 文件 来 实现 
的 ，V8 引 擎 负责 提供 机 制 来 支持 ， 就 是 在 编译 和 执行 输入 的 JavaScript 
代码 之 前 ， 先 加 载 它 们 。 


根据 前 面 的 介绍 ，V8 引 和 擎 需要 编译 和 执行 这 些 内 置 的 JS 代码 ， 同 
时 使 用 扒 等 来 保存 执行 过 程 中 创建 的 对 象 、 代 码 等 ， 这 些 都 需要 较 多 
的 时 间 。 为 此 ，V8 引 入 了 快照 机 制 |。 


快照 机 制 就 是 将 这 些 内 置 的 对 象 和 函数 加 载 之 后 的 内 存 保存 并 序 
列 化 。 序 列 化 之 后 的 结果 很 容易 被 反 序 列 化 ， 经 过 快照 机 制 的 启动 时 
间 ， 可 以 缩减 几 毫 秒 。 在 编译 的 时 候 打 开 选 项 “snapshot=on” 就 可 以 让 
V8 支持 快照 机 制 。 在 V8 中 ，mksnapshot 工 具 能 够 帮助 生成 快照 。 


快照 机 制 同样 也 能 够 将 一 些 开发 者 认为 需要 的 JS 文 件 序列 化 ， 以 
减少 以 后 处 理 的 时 间 ， 不 过 快照 机 制 有 一 个 非常 明显 的 缺 操 ， 那 就 是 
这 些 代 码 没有 办 法 被 CrankShaft 这 样 的 优化 编译 器 优化 ， 所 以 存在 性 
能 上 的 问题 ， 原 因 读 者 可 以 仔细 思考 一 下 。 


9.2.3” 绑 定 和 扩展 


很 多 时 候 ，JavaScript 引 擎 所 提供 的 能 力 不 能 满足 现实 的 需求 ， 比 
如 引擎 本 身 没 有 HTML5 的 众多 能 力 〈 如 地 理 信 息 ) ， 这 时 ， 引 擎 使 用 
者 需要 扩展 它 的 能 力 。 同 很 多 其 他 的 JavaScript 引 擎 一 样 ，V8 可 以 提供 
扩展 引擎 的 能 力 ， 如 前 面 所 述 ， 当 V8 被 使 用 在 Chromium 中 时 ， 它 就 
使 用 V8 的 绑 定 机 制 来 扩展 DOM 的 实现 。 


V8 提 供 两 种 机 制 ， 第 一 是 Extension 机 制 ， 就 是 通过 V8 提 供 的 基 类 
Extension 来 达到 扩展 JavaScript 能 力 的 目的 。 第 二 是 绑 定 ， 就 是 使 用 
IDL 文 件 或 者 接口 文件 来 生成 绑 定 文件 ， 然 后 将 这 些 文 件 同 V8 引 擎 的 
代码 一 起 编译 。 这 两 种 机 制 在 第 10 章 中 会 被 详细 介绍 。 


9.3 JavaScriptCore5|# 
93.1 原理 


JavaScriptCore5 |= WebKit PAYAATA JavaScripts|#, ese RE 
开 产 WebKit 项 目 之 后 ， 开 产 的 另外 一 个 重要 的 项 目 。 同 其 他 很 多 引擎 
一 样 ， 在 刚 开 始 的 时 候 它 的 主要 部 分 是 一 个 基于 抽象 语法 树 的 解释 
器 ， 这 使 得 它 的 性 能 实在 太 差 。 


从 2008 年 开始 ，JavaScriptCore 引 擎 开始 一 个 新 的 优化 工作 ， 重 新 
实现 了 编译 器 和 字 节 码 解 释 器 ， 这 就 是 SquirrelFish。 该 工作 对 于 引擎 
的 性 能 优化 做 了 比较 大 的 改进 。 随 后 ， 苹 果 内 部 代号 为 “Nitro” 的 
JavaScript 引 擎 也 是 基于 JavaScriptCore 项 目的 ， 它 的 性 能 还 是 非常 出 色 
的 ， 鉴 于 其 是 内 部 项 目 ， 所 以 具体 还 有 什么 特别 的 处 理 就 不 得 而 知 
了 。 在 这 之 后 ， 开 发 者 们 又 将 内 扔 缓存 、 基 于 正则 表达 式 的 JIT 和 简单 
的 JIT 引 入 到 JavaScriptCore 中 。 然 后 ， 又 陆续 加 入 了 字 节 码 解 释 器 。 可 
以 看 出 ，JavaScriptCore 引 | 黎 也 在 不 断 地 高 速 发 展 中 。 


9.3.2 ”架构 和 模块 
9.3.2.1 ”代码 结构 


根据 JavaScriptCore 项 目的 代码 结构 和 之 前 介绍 的 引擎 的 工作 过 
程 ， 读 者 大 概 可 以 猜测 出 代码 结构 中 到 底 有 哪些 主要 模块 和 基本 的 工 


作 了 ， 因 为 该 结构 划分 的 粒度 比 V8 项 目 细致 多 了 ， 还 是 比较 容易 理解 
的 ， 如 图 9-20 所 示 的 代码 结构 目录 。 


JavaScriptCore 
API 各 种 JavaScriptCore 对 外 接口 类 
assembler 汇编 器 ， 用 于 生成 各 个 平台 的 汇编 代码 
bytecode 字 节 人 码 的 表示 和 处 理 相 关 类 
debugger 支持 调试 JavaScript 代码 
dfg DFG JIT 编译 器 
disassembler 反 汇 编 
heap JavaScript 运行 时 使 用 的 堆 和 垃圾 回收 机 制 
interpreter 解释 器 ， 被 简单 JIT 编译 器 所 使 用 
jit 简单 IT 编译 器 
llint 底层 解释 器 ， 负 责 解 释 执行 学 节 码 
parser 解释 并 构建 抽象 语法 树 
profiler 信息 收集 器 
runtime 支持 代码 运行 的 各 个 辅助 类 
shell 简单 的 测试 程序 
tools 各 种 工具 
yarr JavaScript 词法 分 析 器 


图 9-20 ， JavaScriptCore 代 码 结构 


从 代码 目录 中 ， 我 们 可 以 猜测 并 理解 它 的 演进 过 程 : 首先 是 词法 
和 语法 分 析 ， 然 后 使 用 底层 解释 器 来 解释 那些 字 节 码 。 之 后 ， 通 过 简 
单 的 JIT 编 译 器 将 它们 转化 成 本 地 代码 。 还 没 结束 ， 最 后 就 是 引入 DFG 
JIT 编 译 器 。 


这 些 目录 直接 跟 即将 介绍 的 各 个 技术 有 很 好 的 对 应 关系 ， 读 者 先 
有 个 大 致 的 理解 ， 这 样 对 后 面 的 介绍 大 有 帮助 ， 感 兴趣 的 读者 还 可 以 
去 查找 产 码 来 有 个 基本 的 认识 。 


9.3.2.2 ”数据 表示 


JavaScriptCore 引 擎 同样 使 用 句柄 来 表示 数据 ， 对 于 简单 类 型 的 效 
据 则 直接 包含 在 句柄 中 ， 而 对 于 对 象 来 说 ， 则 使 用 指针 来 指向 数据 在 
堆 中 的 位 置 。 同 V8 引 擎 不 同 的 是 ， 在 32 位 和 64 位 机 器 上 ， 句 柄 都 是 使 
用 64 位 来 表示 的 ， 图 9-21 分 别 描述 了 两 种 平台 上 各 种 类 型 的 表示 和 识 
别 方式 。 


整数 FFFF FFFF XXXX XXXX 指针 0000 XXXX XXXX XXXX 


布尔 FFFF FFFE XXXX XXXX 浮 点 0001 XXXX XXXX XXXX 


指针 FFFF FFFB XXXX XXXX Te 浮 点 FFFE XXXX XXXX XXXX 


浮 点 FFFF FFF8 XXXX XXXX 整数 FFFF 0000 XXXX XXXX 


浮 点 0000 0000 XXXX XXXX 


图 9-21 句柄 的 定义 和 各 种 类 型 的 表示 方式 


首先 在 32 位 平台 上 ， 每 个 句柄 都 是 使 用 两 个 32 位 数据 来 表示 。 对 
于 整数 、 布 尔 和 指针 而 言 ， 前 面 32 位 用 来 标记 它们 ， 后 面 32 位 用 来 表 


示 这 些 数 据 。 对 于 双 浮 点 ， 前 32 位 在 区 间 FFFFFFF8~00000000 都 是 用 
来 表示 浮 点 类 型 ， 可 能 稍微 比 原来 的 双 浮 点 表示 范围 小 一 些 ， 但 是 ， 
这 个 范围 已 经 足够 使 用 了 。 同 样 在 64 位 机 器 上 ， 因 为 标记 指针 需要 64 
位 ， 只 好 使 用 前 面 16 位 (0000) ， 而 后 面 的 48 位 用 来 表示 地 址 ， 读 者 
可 能 觉得 这 样 就 没有 64 位 表示 指针 ， 但 是 实际 上 48 位 已 经 足够 。 


同 V8 引 警 相 比 ，JavaScriptCore 引 擎 因为 在 32 位 上 使 用 64 位 来 表示 
句柄 ， 所 以 除了 小 整数 之 外 ， 对 于 浮 点 类 型 同样 可 以 不 需要 访问 堆 中 
的 数据 ， 当 然 ， 缺 点 就 是 每 个 句柄 都 需要 2 倍 的 内 存 空 间 。 


9.3.2.3 ”模块 


同 V8 一 样 的 是 ，JavaScriptCore 引 | 擎 在 开源 之 后 也 引入 了 众多 新 技 
术 。 不 过 ，JavaScriptCore 引 | 擎 与 V8 相 比 还 是 有 很 多 不 同 之 处 的 ， 最 典 
型 的 就 是 它 使 用 了 字 节 码 的 中 间 表 示 ， 并 加 入 了 多 层 JIT 编 译 器 帮助 改 
善 性 能 ， 不 停 地 优化 编译 之 后 的 本 地 代码 。 当 然 JavaScriptCore 在 不 停 
地 演进 的 过 程 中 ， 目 前 的 实现 跟 之 前 的 实现 差别 非常 大 ， 所 以 这 里 介 
绍 的 是 基于 目前 的 结构 的 ， 在 未 来 ， 可 能 还 会 有 很 多 其 他 的 变化 ， 让 
我 们 拭目以待 。 


第 一 ， 不 同 于 V8 引擎 ，JavaScriptCore 引 | 敬 不 是 从 抽象 语法 树 生成 
本 地 代码 ， 而 是 生成 平台 无 关 的 字 节 码 ， 如 图 9-22 所 示 。 
JavaScriptCore 引 擎 自己 定义 了 一 套 字 节 码 规范 ， 该 字 节 码 与 平台 无 
关 ， 而 且 有 了 该 字 节 码 ，JavaScriptCore 就 可 以 基于 其 进行 很 多 在 抽象 
语法 树 之 上 不 能 或 者 很 难 做 到 的 优化 。 读 者 需要 记 住 的 是 ， 不 同 于 
V8， 在 这 之 后 ， 因 为 有 了 字 节 码 ， 所 以 JavaScriptCore 就 不 再 需要 


JavaScript 源 代码 ， 而 V8 使 用 Crankshaft 编 译 器 进行 进一步 优化 ， 则 需 
要 继续 从 JavaScript 源 代码 重新 开始 。 


+ — 


抽象 语法 树 


图 9-22 ”JavaScriptCore 中 从 源 代码 到 字 节 码 


第 二 ， 在 字 节 码 之 后 ，JavaScriptCore 依 然 包 含 了 字 节 码 解 释 器 ， 
这 点 也 类 似 于 Java 虚 拟 机 中 的 解释 器 ， 它 们 都 能 够 解释 字 节 码 然后 生 
成 结果 。 而 不 同 于 Java 虚 拟 机 中 的 解释 器 的 是 ，JavaScriptCore 是 基于 
虚拟 寄存 器 (Virtual Register) 的 虚拟 机 ， 而 Java 是 基于 栈 式 (Stack) 
的 虚拟 机 。 这 一 解释 器 很 有 必要 ， 因 为 一 些 JavaScript 代 码 不 需要 经 过 
很 强 的 优化 ， 只 需要 直接 执行 即 可 ， 复 杂 的 处 理 可 能 市 来 额外 开销 有 反 
而 抵消 了 优化 带 来 的 全 部 好 处 ， 如 图 9-23 所 示 。 同 时 ， 在 字 节 码 执行 
期 间 ， 信 息 收 集 器 会 收集 热点 函数 ， 以 方便 之 后 的 JIT 编 译 器 做 之 后 的 
优化 处 理 。 图 中 的 信息 收集 器 1 之 所 以 加 上 “1”， 是 为 了 区 别 
JavaScriptCore 中 包含 的 各 种 各 样 的 信息 收集 器 。 
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图 9-23 ”JavaScriptCore 从 字 节 码 到 解释 器 和 信息 收集 器 


第 三 ，JavaScriptCore 引 擎 在 获悉 热点 函数 后 ， 需 要 对 它们 进行 优 
化 ， 就 会 使 用 到 简单 (Baseline) JIT 编 译 器 ， 该 编译 器 根据 信息 收集 
器 1 中 的 信息 ， 将 对 应 函数 的 字 节 码 翻 译 成 本 地 代码 ， 不 仅 因为 时 间 问 
题 ， 而 且 并 不 是 所 有 代码 都 合适 做 深层 次 的 优化 ， 所 以 这 里 没有 做 特 


别 多 的 优化 ， 而 是 直接 做 转换 。 图 9-24 描 述 了 这 一 过 程 。 在 实行 这 
本 地 代码 的 时 候 ， 会 有 en ee y 


本 地 代码 1 


图 9-24 JavaScriptCore 的 简单 JIT 编 译 器 


第 四 ， 如 果 你 认为 只 需要 JIT 编 译 器 就 够 了 ， 那 就 错 了 ， 简 单 的 
JIT 编 译 器 并 不 能 满足 性 能 的 要 求 ， 特 别 是 对 V8 的 Crankshaft 编 译 器 来 
说 ， 性 能 差距 就 显现 出 来 了 。 为 了 提高 性 能 ，JavaScriptCore 中 又 引入 
SDFG (Data-Flow Graph) JIT 编 译 器 ， 该 编译 器 是 在 字 节 码 基础 上 ， 
生成 基于 SSA (Static Single Assignment) 的 中 间 表 示 (IR) 。 当 然 具 
体 哪些 字 节 码 需要 重新 生成 优化 的 本 地 代码 ， 就 依赖 之 前 的 信息 收集 
器 2， 如 图 9-25 所 示 。 优 化 后 的 本 地 代码 相 比 之 前 的 代码 ， 对 于 性 能 
很 好 的 提升 。 


DFG JIT 编译 器 


基于 SSA 的 中 间 表 示 


图 9-25 JavaScriptCorehYDFG JIT 编 译 器 


第 五 ， 要 是 你 认为 这 样 就 足够 了 ， 那 就 更 错 了 。 在 笔者 介绍 
JavaScriptCore 的 时 候 ， 该 项 目 依然 在 进行 一 项 更 为 大 胆 的 工作 ， 就 是 
将 LLVM 技 术 引 入 到 JavaScriptCore。 那 么 LLVM 是 什么 呢 ? LLVM 是 一 
个 由 苹果 公司 发 起 的 开源 项 目 ， 其 开发 和 灵活 的 架构 受到 越 来 越 多 人 
的 关注 。 


LLVM 是 一 个 编译 器 ， 能 够 将 多 个 不 同 的 前 端 语 言 转化 成 不 同 的 
后 端 本 地 代码 ， 图 9-26 描 述 了 LLYM 的 基本 结构 ， 该 编译 器 在 前 端 和 
后 端 都 能 做 优化 ， 这 些 优化 都 是 可 配置 的 ， 所 以 非常 灵活 。 同 时 ， 随 
着 该 项 目 越 来 越 成 功 ， 加 入 的 优化 也 越 来 越 多 。JavaScriptCore 希 望 将 
LLVM 编 译 器 的 中 间 表 示 引 入 其 中 ， 这 样 将 很 容易 将 这 些 优化 使 用 在 
该 引擎 中 ， 图 9-27 描 述 了 这 一 过 程 。 


优化 1 优化 2 


优化 


图 9-26 LLVM 基 本 结构 


再 优化 后 本 地 代码 3 


图 9-27 使 用 LLVM 技 术 的 JIT 编 译 器 


这 一 过 程 是 基于 DFG JIT 中 间 表 示 开 始 的 ， 为 了 节省 时 间 ， 使 用 
了 并 行 编译 算法 。 之 后 ， 生 成 LLVM 的 中 间 表 示 ， 这 样 就 可 以 使 用 
LLVM 中 间 表 示 之 后 的 众多 优化 ， 而 且 可 以 按 需 配置 它们 。 这 一 过 程 
仅仅 对 于 那些 最 热点 的 函数 使 用 ， 因 为 其 层次 太 多 ， 消 耗 的 时 间 更 
多 ， 所 以 愤 用 。 这 一 技术 目前 还 在 开发 中 ， 未 来 效果 如 何 还 未 可 知 ， 
不 过 相信 对 于 某 些 特定 的 例子 会 有 不 少 好 处 。 


为 什么 不 直接 使 用 优化 性 能 最 好 的 编译 器 呢 ? 原因 是 优化 越 好 通 
常 需要 的 分 析 和 生成 代码 的 时 间 就 越 长 。 读 者 回忆 之 前 介绍 的 应 用 场 
景 就 会 发 现 ， 如 果 用 户 使 用 的 是 利用 C/C++ 编译 的 代码 ， 那 么 编译 时 
间 长 一 点 问题 不 大 ， 因 为 是 开发 者 在 编译 他 们 。 而 对 于 JavaScript 来 
说 ， 编 译 时 间 越 长 ， 对 用 户 来 说 同样 ， 等 待 的 时 间 更 长 ， 效 果 可 能 
未 必 会 好 。 这 就 是 一 把 双 刃 剑 ， 所 以 该 方法 只 限定 在 特定 的 范围 内 使 
用 。 


93.4 “内存 管理 


在 JavaScriptCore 中 ， 内 存 管理 和 垃圾 回收 机 制 也 随 着 其 他 技术 的 

变 而 发 生 着 很 大 的 变化 。 对 于 垃圾 回收 机 制 来 说 ， 最 重大 的 改变 就 
是 像 V8 一 样 ， 引 入 了 分 代 垃 圾 回收 机 制 。 所 以 ， 堆 也 会 被 分 成 几 个 分 
代 。 这 样 ， 当 进行 垃圾 回收 的 时 候 ， 就 不 需要 对 所 有 对 象 进行 标记 。 
分 代 技 术 前 面 也 讨论 过 了 ， 而 且 很 早 就 在 其 他 虚拟 机 中 使 用 ， 如 Java 
虚拟 机 ， 它 们 思想 都 是 类 似 的 ， 这 里 不 再 帝 述 。 


在 V8 中 使 用 Zone 来 一 次 性 释放 内 存 ，JavaScriptCore 中 也 有 类 似 的 
机 制 ， 那 就 是 JSGlobalData， 这 里 也 不 再 过 多 的 描述 。 


9.3.5 HE 


JavaScriptCore 同 样 能 够 提供 绑 定 机 制 ， 目 前 泻 染 引擎 同样 是 通过 
该 机 制 访 问 DOM 的 操作 冰 数 ， 这 点 跟 V8 非 常 像 。 本 质 上 ， 它 们 都 是 
提供 额外 的 JavaScript 接 口 来 扩展 JavaScript 引 擎 的 能 力 。 同 样 ， 我 们 将 
在 下 一 章 做 详细 介绍 。 


9.3.6 ”比较 JavaScriptCore 和 V8 


由 于 JavaScriptCore 一 直 是 Webkit 的 默认 JavaScript 引 擎 ， 所 以 被 广 
泛 应 用 。 但 是 ， 随 着 Google 发 布 Chrome 的 同时 加 上 V8 引擎 ， 而 且 V8 
自 出 现 后 就 是 以 性 能 作为 目标 ， 引 入 了 众多 新 闲 的 技术 ， 确 实 极 大 地 
推动 了 整个 业界 的 JavaScript 引 黎 性 能 的 快速 发 展 。 但 是 ， 如 果 想 用 一 
句 话 说 明 V8 和 JavaScriptCore 的 优 劣 ， 这 是 很 困难 的 。 在 很 多 领域 ， 
V8 扮演 着 冲锋 者 的 角色 ， 但 是 JavaScriptCore 依 旧 不 断 改 进 自己 的 技术 
和 实现 ， 同 时 在 某 些 方面 ， 因 为 使 用 了 一 些 V8 没 有 的 东西 ， 如 字 节 码 
反而 在 某 些 情况 下 较 容易 优化 。 当 然 ， 这 也 不 是 绝对 的 。 


天 于 各 个 技术 细节 ， 例 如 内 部 代码 表示 、 解 释 器 、JIT、 句 柄 数据 
表示 等 方面 ， 我 们 在 前 面 都 一 一 做 了 介绍 ， 读 者 可 以 回忆 一 番 。 我 们 
前 面 已 经 介绍 了 以 上 两 个 引擎 的 很 多 特点 和 好 处 ， 笔 者 还 希望 留 一 些 
想象 的 空间 ， 让 读者 自己 体会 上 面 这 些 技术 细节 带 来 的 潜在 优势 和 缺 
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94 实践 一 高 效 的 JavaScript 代 
位 


9.4.1 ”编程 方式 


天 于 如 何 使 用 JavaScript 语 言 来 编写 高 效 的 代码 ， 有 很 多 铺天盖地 
的 经 验 分 享 ， 以 及 很 多 特别 好 的 建议 ， 读 者 可 以 搜索 相关 的 词 条 ， 就 
能 获得 一 些 你 可 能 需要 的 结果 。 同 时 ， 本 节 和 希望 结合 前 面 介 绍 的 各 种 


引擎 内 部 的 技术 ， 按 照 特 定 的 类 别 为 读者 归纳 一 些 方式 和 方法 ， 让 我 
们 从 以 下 几 个 方面 来 解读 它们 。 


类 型 。 因 为 JavaScript 的 类 型 是 在 动态 时 候 确 定 的 ， 这 给 引擎 带 来 
很 大 的 问题 。 同 时 对 于 某 个 图 数 来 说 ，V8 和 JavaScriptCore 都 使 用 
了 隐藏 类 和 内 名 缓 存 技术 来 加 速 对 象 和 属性 的 访问 ， 所 以 对 于 该 
国 数 只 是 使 用 某 个 类 型 的 对 象 或 者 较 少 类 型 ， 以 此 减少 缓存 失误 
的 机 率 从 而 提高 性 能 。 同 时 ， 对 于 数组 ， 尽 量 使 用 存放 相同 类 型 
的 数据 ， 这 样 可 以 通过 偏 移 位 置 来 访问 它们 。 在 目前 的 众多 技术 
中 ， 比 较 突出 的 就 是 asm.js， 它 主要 是 在 JavaScript 中 显示 标记 一 
些 类 型 ， 这 样 可 以 让 JavaScript 引 擎 能 够 准确 判断 对 象 的 类 型 ， 从 
而 生成 优化 的 代码 。 目 前 Firefox 项 目 中 的 JavaScript 5| # 
SpiderMonkey 已 经 (正在 做 ) 内 置 支持 该 JavaScript 文 件 ， 详 情 请 
查找 asm.jso 

数据 表示 。 因 为 一 些 简单 类 型 的 数据 直接 保存 在 句柄 中 ， 这 能 够 
有 效 地 减少 寻 址 时 间 和 内 存 的 使 用 。 但 是 ， 因 为 使 用 了 一 部 分 位 
(特别 对 于 V8 引擎 ) 来 表示 ， 所 以 整数 表示 范围 缩小 ， 如 果 使 用 
较 大 的 整数 ， 那 么 就 需要 使 用 堆 来 保存 。 同 时 ， 对 于 数值 来 说 ， 
只 要 能 够 使 用 整数 的 ， 尽 量 不 要 使 用 浮 点 类 型 。 

AF. 。 有 效 使 用 内 存 能 够 显著 地 提高 代码 的 性 能 。 对 于 使 用 垃圾 
回收 的 语言 来 说 ， 并 不 是 意味 着 没有 内 存 泄露 的 问题 ， 这 就 需要 
即时 回收 不 需要 使 用 的 内 存 。 简 单 的 做 法 就 是 对 引用 不 再 使 用 的 
对 象 的 变量 设置 为 空 (a = null) 。 另 外 一 个 方法 跟 类 型 有 关 ， 通 
过 引入 delete 关 键 字 ， 代 码 可 以 使 用 “delete a.x” 来 删除 一 个 对 象 ， 
这 虽然 可 以 减少 内 存 的 使 用 ， 但 是 因为 使 用 了 隐藏 类 ， 这 种 情况 
下 可 能 需要 新 建 隐藏 类 ， 所 以 这 会 带 来 一 些 复 杂 的 额外 操作 。 


。 优化 回 滚 。 如 前 面 介 绍 的 ， 不 要 书写 出 触发 出 现 优化 回 滚 的 代 
码 ， 否 则 会 大 幅 降低 代码 的 性 能 。 在 执行 多 次 之 后 ， 不 要 出 现 修 
改 对 象 类 型 的 语句 。 这 说 起 来 可 能 有 些 难 ， 但 实际 上 ， 如 示例 代 
码 9-5 之 类 的 用 法 即 可 。 

。 新 机 制 。 使 用 JavaScript5 擎 或 者 是 泻 染 引擎 提供 的 新 机 制 和 新 接 
口 ， 如 前 面 介 绍 的 requestAnimationFrame 等 接口 ， 这 样 可 以 有 效 
减少 JavaScript 引 警 的 额外 负担 。 另 外 ， 可 以 使 用 WebWworker 等 
JavaScript 并 发 技术 来 提升 引擎 并 发 处 理 能 力 。 


9.4.2 ”例子 


在 浏览 器 中 ，JavaScript 引 擎 和 泻 染 引擎 WebKit 需 要 协同 工作 才能 
达到 一 个 好 的 效果 ， 结 合 这 二 者 ， 这 一 小 节 来 介绍 一 个 简单 的 例子 ， 
就 是 后 来 被 引入 的 新 的 JavaScript 接 口 requestAnimationFrame， 以 此 来 
解释 它 是 如 何 解 决 两 者 之 间 一 些 比 较 难 以 处 理 的 问题 的 ， 以 及 它 给 
Web 前 端 开发 者 带 来 的 思考 。 


接触 过 JavaScript 的 读者 应 该 有 过 了 解 或 者 使 用 setTimeout 或 
setInterval 的 经 历 ， 其 功能 是 在 每 个 时 间 间 隔 之 后 一 次 性 或 者 重复 多 次 
执行 一 段 JavaScript 代 码 〈 称 为 回调 函数 ) ， 以 完成 特定 的 动画 要 求 。 
但 是 ， 这 里 面 多 少 还 有 些 疑 问 。 


。 时 间 间 隔 应 该 设置 为 多 少 才 合适 呢 ? 跟 屏幕 的 分 辩 率 有 关系 吗 ? 

。 设置 的 时 间 间 隔 会 按照 预想 的 执行 吗 ? 动画 会 被 平滑 地 显示 出 效 
果 吗 ? 

。 回调 函数 是 复杂 的 好 还 是 简单 的 好 呢 ? 应 该 如 何 编 写 才 能 效率 高 
呢 ? 


。 与 平台 和 浏览 器 相关 吗 ? 如 何 适 应 不 同 操作 系统 和 浏览 器 呢 ? 


这 些 问 题 对 setTimeout 和 setInterval 来 说 很 重要 。 对 主 循环 机 制 和 
泻 染 机 制 有 一 定 了 解 的 读者 来 说 ， 上 面 这 几 条 其 实 是 非常 难 做 到 的 ， 
哪怕 是 较为 接近 理想 的 结果 也 很 难 达 到 。 


幸运 的 是 ， 总 是 有 聪明 的 人 来 帮助 大 家 解决 难题 。 对 问题 提出 一 
上 漂亮 解决 方案 的 是 Mozilla 的 Robert O'Callahan。 他 的 灵感 和 依据 来 
oe. CSS 能 够 若 道 动画 什么 时 候 发 生 ， 所 以 能 够 较为 准确 地 知 
道 什么 时 候 该 刷新 用 户 界面 。 对 于 JavaScript 来 说 ， 是 不 是 也 可 以 应 用 
类 似 的 机 制 呢 ? 答案 是 衣 定 的 。 其 做 法 是 增加 一 个 新 的 函数 
requestAnimationFrame， 该 国 数 告诉 浏览 器 JavaScript 想 友 起 一 个 动画 
帧 ， 然 后 在 动画 帧 绘制 之 前 ， 需 要 做 一 些 动 作 ， 这 样 浏览 器 可 以 根据 
需要 来 优化 自己 的 消息 循环 机 制 和 调用 时 间 点 ， 以 达到 较 好 的 平衡 效 
果 。 


WebKit 中 setTimeout 和 setInterval 的 实现 机 制 是 类 似 的 ， 区 别 在 于 
后 者 是 重复 性 的 ， 如 图 9-28 所 示 的 类 关系 。 


ThreadTimers 


TimerBase 


SuspendableTimer 
DOMTimer 


图 9-28 ”WebKit 中 的 计时 器 等 相关 类 


WebKit 会 为 DOM 树 中 的 每 个 setTimeout 和 setInterval 调 用 创建 一 个 
DOMTimer， 而 后 该 对 象 会 由 存储 TLS (Thread Local Storage) 中 的 
ThreadTimers 负 责 管 理 ， 其 内 部 其 实 是 一 个 最 小 堆 ， 每 次 将 超时 时 间 
设置 为 最 小 的 。 同 时 ， 时 间 相 同 的 计时 器 可 以 合并 。 当 计时 器 超时 
后 ，Chromium 将 清除 该 计时 器 对 象 ， 同 时 调用 相应 的 回调 函数 ， 回 调 
国 数 通常 会 更 新 页 面 的 样式 和 布局 ， 这 会 触发 重新 计算 布局 ， 从 而 触 
发 立即 重新 绘制 一 个 新 帧 。 结 合 上 面 的 摘 述 ， 这 里 大 致 总 结 一 下 
setTimeout 和 setInterval 的 不 足 。 


。 setTimeout 和 setInterval 从 不 考虑 浏览 器 内 部 发 生 了 其 他 什么 事 ， 
它们 只 要 求 浏览 器 在 某 个 时 间 之 后 来 调用 回调 函数 ， 无 论 浏览 
很 繁忙 或 者 页 面 被 隐藏 (虽然 某 些 浏览 器 做 了 这 方面 的 优化 ， 如 
Chromium) 。 

setTimeout 和 setInterval 只 是 要 求 浏 览 器 做 什么 ， 而 不 管 浏览 器 能 
不 能 做 到 (如 主 循环 有 很 多 事件 需要 处 理 ) ， 这 有 点 强人 所 难 ， 
而 且 会 带 来 极 大 的 资源 浪费 。 例 如 屏幕 的 刷新 率 是 60Hz， 但 是 设 
置 的 时 间 间 陋 是 5 富 秒 ， 其 实 对 用 户 来 说 ， 他 们 根本 看 不 到 这 些 变 
化 ， 但 却 额外 需要 消耗 更 多 的 CPU 资产 ， 太 不 环保 了 。 
setTimeout 和 setInterval 可 能 是 出 于 编程 风格 方面 的 考虑 。 如 果 每 
一 帧 在 不 同 的 代码 处 需要 设置 回调 函数 ， 一 个 方法 是 将 这 些 代 码 
统一 到 一 个 地 方 ， 但 是 这 有 点 勉 为 其 难 ， 另 一 个 方法 是 分 别 用 
setInterval 设 置 它们 ， 这 个 方法 的 问题 是 ， 浏 览 器 可 能 需要 计算 更 
多 次 ， 刷 新 更 多 次 的 屏幕 。 


现在 再 来 看 看 requestAnimationFrame 是 如 何 解决 这 些 不 足 之 处 的 
E? 其 原理 就 是 其 会 申请 绘制 下 一 帧 ， 至 于 什么 时 候 还 不 知道 ， 都 是 
由 浏览 器 决定 ， 浏 览 器 只 需要 在 绘制 下 一 帧 前 执行 其 设置 的 回调 函 


数 ， 完 成 JavaScript 代 码 对 动画 所 做 的 设置 和 逻辑 即 可 。 基 本 过 程 如 


。 JavaScript 调 用 requestAnimationFrame ， 因 而 相应 地 ， Webkit 和 
Chromium 会 调度 一 个 需要 绘制 下 一 帧 的 事件 ， 该 事件 会 将 
requestAnimationFrame 的 调用 上 下 文 和 回调 函数 记录 下 来 。 

上 面 的 请 求 会 触发 Chromium 更 新 页 面 内 容 的 事件 ， 该 事件 被 
mainloop 调 度 处 理 后 ， 会 检查 是 否 需要 调用 动画 的 相关 处 理 ， 
为 有 动画 需要 处 理 ， 所 以 会 依次 调用 那些 回调 函数 ，JavaScript5 
擎 会 更 新 相应 的 CSS 属 性 或 者 DOM 树 修改 。 
Chromium 触 发 重新 计算 布局 (参看 布局 章节 ) ， 更 新 自己 的 
Renderer 树 ， 而 后 绘制 ， 完 成 一 帧 的 泻 染 。 


上 面 这 些 描述 会 给 Web 前 端 开发 者 们 在 编写 JavaScript 代 码 时 带 来 
哪些 思考 和 便利 呢 ? 


。 回调 函数 不 能 太 大 ， 不 能 占用 太 长 时 间 ， 否 则 会 影响 页 面 的 响应 
和 绘制 的 频率 。 

e requestAnimationFrame 不 需要 设置 间隔 时 间 ， 不 同 刷新 率 的 间隔 
时 间 可 能 不 一 样 ， 这 完全 由 浏览 器 来 控制 ， 而 不 需要 JavaScript 代 
码 的 开发 者 们 操心 。 

。 回调 函数 无 需 合 并 ， 开 发 者 们 可 以 在 任意 位 置 设置 回调 孙 数 ， 它 
们 可 以 被 浏览 器 集中 处 理 ， 而 无 需 有 统一 的 入 口 。 


一 个 新 的 JavaScript 接 口 可 以 带 来 很 不 错 的 处 理 方式 ， 以 此 来 平衡 
JavaScript 引 擎 和 泻 染 引擎 之 间 的 关系 ， 并 且 能 够 有 效 帮 助 那 些 利用 
JavaScript 和 HTML5 技 术 来 实现 动画 的 开发 者 们 ， 这 一 点 值得 我 们 思 
考 。 


9.4.3 ”未 来 


因为 历史 的 局 限 性 ，JavaScript 最 初 的 时 候 并 不 合适 用 来 开发 大 工 
程 和 性 能 要 求 非常 高 的 场景 ， 所 以 开发 者 编写 的 代码 对 性 能 要 求 也 不 
是 很 高 。 但 是 ， 目 前 的 发 展 趋势 是 需要 很 高 的 性 能 ， 为 此 ， 仅 仅 依 靠 
任何 一 方 是 没有 办 法 来 达到 此 目标 的 。 笔 者 认为 ， 今 后 为 了 高 效 的 
JavaScript 代 码 性 能 ， 至 少 需要 以 下 三 个 方面 的 努力 ， 而 且 ， 就 目前 而 
言 ， 它 们 也 都 在 不 停 地 向 前 发 展 。 


首先 是 JavaScript 语 言 和 规范 的 发 展 。 目 前 虽然 规范 定义 的 
WebWorker 在 一 定 程度 上 能 够 并 发 ， 但 是 能 力 非常 有 限 ， 而 且 两 者 之 
间 只 能 通过 有 限 的 方式 来 通信 (这 个 技术 是 由 W3C 组 织 引 入 的 ) 。 如 
果 能 够 在 ECMAScript 标 准 中 推动 并 行 JavaScript 能 力 ， 这 绝对 是 一 个 大 
胆 而 又 令 人 神往 的 想法 。 目 前 ， 一些 大 公司 或 者 组 织 已 经 在 推动 并 行 
JavaScript， 希 望 未 来 有 快速 的 发 展 ， 能 够 融 领 JavaScript 真 正 进 入 并 行 
时 代 。 


其 次 是 JavaScript 引 擎 技术 的 发 展 和 创新 。 一 个 简单 的 例子 就 是 ， 
V8 不 停 地 将 之 前 用 在 其 他 编译 器 的 技术 带 入 到 JavaScript 引 擎 中 来 ， 同 
时 自身 也 创造 一 些 新 的 方法 。 据 笔者 目前 观察 得 知 ， 基 本 每 个 V8 版 本 
的 升级 都 会 带 来 性 能 上 的 提高 ， 大 家 有 理由 相信 ， 在 这 场 JavaScript 引 
和 擎 大 战 中 ， 各 个 引擎 都 会 不 停 地 提升 技术 以 提升 性 能 。 


最 后 是 同 Web 前 端 开 发 者 相关 的 ， 那 就 是 关于 编写 高 效 的 
JavaScript 代 码 。 结 合 语言 的 新 能 力 和 引擎 技术 的 不 断 发 展 ， 要 根据 它 
们 的 特点 ， 使 用 新 技术 和 回避 一 些 会 对 引擎 带 来 重大 性 能 伤害 的 用 


法 。 目 前 还 没有 这 方面 的 系统 介绍 ， 和 希望 未 来 能 够 有 更 多 帮助 开发 者 
提高 代码 效率 的 使 用 方法 被 共享 出 来 。 


第 10 章 ”插件 和 JavaScript 扩 展 


里 然 目 前 的 浏览 器 能 力 很 强大 ， 但 是 仍然 有 能 力 不 足 的 时 候 。 特 
别 是 早期 的 浏览 器 能 力 十 分 有 限 ，Web 前 端 开发 者 们 希望 能 够 通过 一 
些 机 制 来 扩展 浏览 器 的 能 力 。 早 期 的 方法 就 是 插件 机 制 ， 现 在 流行 的 
则 是 混合 编程 (Hybrid Programming) 模式 。 插 件 一 直 伴 随 着 浏览 
的 发 展 ， 最 著名 的 莫 过 于 Adobe 公 司 的 Flash 插 件 。 对 于 插件 的 接口 定 
义 ， 差 别 也 是 很 大 ， 比 较 著 名 的 是 微软 公司 的 ActiveX 插 件 机 制 和 网 景 
公司 的 NPAPI 插 件 。 随 后 ，Chromium 项 目 考 虑 到 性 能 引入 了 PPAPI 插 
件 机 制 ， 同 时 为 了 安全 方面 的 考虑 ， 引 入 了 Native Client 机 制 。 这 些 插 
件 机 制 扩 展 了 浏览 器 的 能 力 ， 极 大 地 丰富 了 网 页 的 应 用 场景 。 同 时 ， 
随 着 HTML5 的 发 展 ， 很 多 HTML5 功 能 同样 需要 扩展 JavaScript 的 编程 
接口 ， 以 便 开 发 者 可 以 使 用 JavaScript 代 码 来 调用 ， 而 这 样 的 扩展 就 需 
要 相应 的 机 制 来 实现 ， 本 章 将 重点 介绍 和 探索 这 些 机 制 。 


10.1 ”NPAPI 插 件 


10.1.1 ”NPAPI 简 介 


NPAPI (Netscape Plugin Application Programming Interface) 的 全 
称 是 网 景 插件 应 用 程序 编程 接口 ， 最 早 是 由 网 景 公 司 提出 的 ， 用 于 让 
浏览 器 执行 外 部 程序 ， 以 支持 网 页 中 各 种 格式 的 文件 ， 典 型 的 例子 是 
视频 、 音 频 和 PDF 文件 等 《通过 内 容 类 型 来 区 分 ) 。 对 于 这 些 网 络 资 
源 或 者 文件 ， 浏 览 器 本 身 并 不 支持 它们 。 但 是 ， 经 过 第 三 方 开 发 者 开 
发 的 插件 程序 ， 浏 览 器 就 可 以 做 到 支持 了 。 图 10-1 是 Chrome 浏 览 器 使 


用 NPAPI 插 件 的 列表 中 一 个 示例 〈 在 地 址 栏 中 输入 chrome:/plugins/ 就 
人 
览 器 会 调用 该 阅读 器 插件 ， 通 过 NPAPI 规 范 定 义 的 接口 使 浏览 器 同 插 
件 之 间 得 以 交互 。 


Adobe Reader - Version: 10.1.7.27 
Adobe PDF Plug-In For Firefox and Netscape 10.1.7 
Name: Adobe Acrobat 
Description: | Adobe PDF Plug-In For Firefox and Netscape 10.1.7 
Version: 10.1.7.27 
Location: C:\Program Files (x86)\Adobe\Reader 10.0\Reader\AIR\nppdf32.dll 
Type: NPAPI 
Disable 


MIME types: MIME type Description File extensions 


application/pdf Acrobat Portable Document Format .pdf 
application/vnd.adobe.pdfxm Adobe PDF in XML Format .pdfxm 
application/vnd.adobe.x-mars Adobe PDF in XML Format «mars 
application/vnd.fdf Acrobat Forms Data Format fdf 
application/vnd.adobe.xfdf XML Version of Acrobat Forms Data Format xfdf 
application/vnd.adobe.xdp+xm! Acrobat XML Data Package .xdp 


application/vnd.adobe.xfd+xml Adobe FormFlow99 Data File .xfd 


图 10-1 Chrome 浏览 器 中 Adobe 阅 读 器 插件 


现实 中 ，NPAPI 机 制 被 广泛 地 应 用 ， 很 多 厂商 或 者 开发 者 基于 该 
接口 规范 编写 了 数量 众多 的 插件 实现 ， 因 而 Chromium 项 目 也 必须 对 它 
提供 支持 ， 不 过 Chromium 还 有 自己 独特 的 插件 染 构 ， 后 面 会 详细 介 
绍 。 使 用 插件 的 方法 也 非常 简单 ， 在 网 页 中 申明 如 下 语句 即 可 ， 它 表 
示 使 用 上 述 插件 来 打开 一 个 PDF 文件 并 显示 在 网 页 中 : 


<embed id="plugin" type="application/pdf" 


src="src/abc.pdf"> 


NPAPI 提 供 两 组 接口 ， 一 类 以 NPP 开 始 ， 由 插件 来 实现 ， 被 浏览 
aia, BELO. Meat. Al. FS. HARB 
事件 处 理 、 数 据 流 、 窗 口 设 置 、URL 等 。 另 一 类 以 NPN 开 始 ， 由 浏览 


器 来 实现 ， 被 插件 所 调用 ， 主 要 包括 图 形 绘制 、 数 据 流 处 理 、 浏 览 
信息 查询 、 内 存 分 配 和 释放 、 浏 览 器 的 插件 设置 、URL 等 。 这 两 类 接 
口 足 够 满足 大 多 数 双方 交互 的 需求 。 


原始 的 NPAPI 接 口 使 用 起 来 不 是 很 方便 ， 因 而 有 开发 者 对 其 进行 
了 封装 以 便于 其 使 用 。 一 个 比较 著名 的 开源 项 目 是 Firebreath。 它 将 原 
台 C 风 格 的 NPAPI 接 口 封 装 成 C++ 风格 的 接口 ， 非 常 方便 用 户 使 用 ， 而 
且 有 针对 Windows 和 X Window 的 移植 ， 用 户 无 须 对 底层 接口 特别 了 
解 。 更 为 有 趣 的 是 ，Firebreath 也 有 对 ActiveX 接 口 规范 的 封装， 因而 对 
于 现在 主流 的 两 种 插件 接口 ， 开 发 者 都 可 以 基于 Firebreath 的 接口 进行 
编程 ， 极 大 地 增强 了 移植 性 和 通用 性 。 详 情 请 参考 Firebreath 项 目的 主 
页 , 网 址 如 ois 所 未 ” 


http://www.firebreath.org/display/documentation/FireBreath+Homeo 


下 面 主 要 介绍 WebKit 和 Chromium 中 是 如 何 支持 插件 机 制 的 ， 所 以 
上 面 的 使 用 Firebreath 等 项 目 开发 插件 的 实现 不 在 本 书 的 范围 内 ， 有 兴 
趣 的 读者 请 自行 学 习 。 


10.1.2 “WebKit 和 Chromium 的 实现 
10.1.2.1 WebKit 基 础 设施 

NPAPI 插 件 获得 了 WebKit 的 支持 ， 因 为 它 的 广泛 使 用 性 。 在 
HTML 网 页 中 ， 可 以 通过 两 种 类 型 的 元 素 “embed” 和 “object” 来 使 用 插 


件 。 两 者 都 可 以 用 来 在 网 页 中 内 髓 插件 ， 看 起 来 “<embed” 元 素 更 老 一 
些 ， 之 前 的 一 些 浏览 器 只 支持 “embed” 而 不 支持 “object”， 不 过 在 


WebKit 中 ， 两 者 都 得 到 了 支持 ,一 个 简单 的 例子 如 “<embed 
src="Webkit.pdf/>”。 那 么 ，WebKit 中 是 如 何 支 持 它们 的 呢 ? 


Sle a i a ie 初 看 起 
来 比较 复杂 和 和 杂乱无章， 那么 就 分 成 左 、 中 、 右 三 个 部 分 分 别 介 绍 它 
由 Js ee 
类 ， 因 为 有 两 种 HTML 元 素 可 以 表示 插件 ， 所 以 为 它们 抽象 出 来 了 一 
个 基 类 。 对 于 插件 元 素 在 DOM 树 中 的 对 应 节点 ，RenderObject 树 中 对 
应 就 是 RenderWidget 对 象 ， 用 于 表示 这 是 个 可 视 化 的 元 素 。 在 某 些 
WebKit 移 植 中 ， 甚 至 引入 了 硬件 加 速 机 制 来 加 速 插件 的 绘制 ， 例 如 
WebKit 的 Qt 移植 。 它 的 基本 思想 是 将 插件 元 素 作为 单独 的 一 个 层 

(PlatformLayer) 来 处 理 ， 插 件 的 实例 将 绘制 所 有 内 容 在 这 一 层 上 
就 像 视 频 元 素 一 样 。 


aioe [Widget | 
p 
eA Bal a. Secor 
| PluginView | PluginDatabase 
-m_element 上 S 
-PluginPackage m_plugin 
-NPP m_instance ’ 
{\ 


Te 


-m_pluginFuncs 
-m_browserFuncs 


图 中 右 侧 部 分 表示 的 是 webKit 如 何 管理 插件 库 ， 主 要 使 用 两 个 


类 : 


图 10-2 WebKit 中 支持 插件 的 相关 类 


e PluginDatabase : 注册 和 管理 所 有 的 插件 实现 ， 一 个 插件 通常 是 
一 个 动态 库 ， 插 件 的 信息 包括 名 字 、 描 述 、 版 本 ， 还 有 最 重要 的 
MIME 类 型 和 文件 的 扩展 名 (File extensions) ， 例 如 图 10-1 中 的 
PDF 插件 能 够 支持 MIME 类 型 “application/pdf> 和 扩展 名 “.pdf”。 当 
然 ， 一 个 插件 也 可 以 支持 多 种 类 型 的 文件 。 同 时 ， 它 能 够 根据 
MIME 类 型 和 文件 扩展 名 来 查找 相应 的 插件 库 。 

PluginPackage : 表示 一 个 插件 库 ， 也 就 是 PluginDatabase 类 管理 
的 对 象 。 它 包含 两 个 非常 重要 的 变量 ， 就 是 m_pluginFuncs 和 
m_browserFuncs ， 对 应 的 就 是 前 面 介绍 的 NPP 开 头 的 水 数组 和 
NPN 开 头 的 函数 组 。 


在 中 间 部 分 的 表示 是 插件 的 视图 部 分 ， 它 和 DOM 元 素 或 者 
RenderWidget 对 象 一 一 对 应 ， 其 作用 当然 是 绘制 插件 的 可 视 化 结果 ， 
同时 它 需 要 调用 最 右 侧 的 类 来 获取 插件 。 


。 NPP : 使 用 PluginPackage 的 接口 来 创建 的 插件 实例 。 

。 PluginViewBase : 抽象 类 ， 主 要 是 定义 一 些 接口 ， 这 些 接口 会 被 
HTMLPlugin- Element 类 调用 ， 用 来 处 理 视 图 方面 的 一 些 操作 ， 如 
鼠标 、 聚 焦 (focus) 等 。 

PluginView : 表示 的 是 一 个 插件 的 视图 ， 它 非常 重要 ， 连 接 了 插 
件 库 和 网 页 中 DOM 接 口 和 可 视 化 RenderObject 节 点 ， 包 含 所 需 的 
插件 库 和 插件 实例 。 

NPObject : 表示 的 是 插件 和 浏览 器 (这 里 是 WebKit) 之 间 数 据 
的 交互 类 型 ， 因 为 插件 能 够 访问 DOM 树 和 JavaScript 对 象 ， 所 以 
JavaScript 中 的 基本 类 型 和 JavaScript 对 象 都 会 包装 成 NPObject 来 在 
两 者 之 间 传 递 。 


对 于 PluginDataBase、PluginPackage 和 Pluginview 类 ， 在 不 同 的 移 
植 中 ， 它 们 可 能 会 需要 一 些 不 同 的 实现 ， 所 以 移植 通常 可 能 会 扩展 它 
们 ， 当 然 主 要 工作 逻辑 可 以 共享 。 对 于 WebKit 的 Chromium 移 植 来 说 ， 
它 的 实现 更 为 复杂 ， 在 下 一 节 详 细 介 绍 。 


对 于 插件 机 制 ， 有 几 个 问题 要 回 舍 ， 第 一 是 插件 库 的 注册 、 碍 找 
等 管理 机 制 。 第 二 是 WebKit 中 的 插件 节点 的 处 理 ， 包 括 DOM 树 和 
RenderObject 树 如 何 支持 插件 。 第 三 是 如 何 使 用 注册 的 插件 来 创建 插 
件 示例 并 绘制 需要 的 结果 到 网 页 最 终结 果 中 去 。 下 面 我 们 来 具体 说 明 
一 下 


首先 是 插件 库 管 理 机 制 。 管 理 的 基础 是 MIME 类 型 和 文件 扩展 
名 ， 例 如 对 于 “<embed src="webkit.pdf/>” 这 样 的 例子 ，PluginView 类 会 
将 “.pdf” 文 件 扩 展 名 当 作 参数 传递 给 PluginDatabase 并 期 待 返回 一 个 
PluginPackage 对 象 。 对 于 某 个 MIME 类 型 ， 当 出 现 多 个 插件 支持 的 时 
候 ， 管 理 机 制 需 要 决定 如 何 选择 它们 。 


第 二 是 插件 节点 的 处 理 。 当 网 页 中 出 现 “embed” 和 “object” 元 素 的 
时 候 ，WebKit 会 首先 创建 HTMLPlugInElement (应 该 是 它 的 子 类 ) 对 
象 ， 之 后 需要 创建 RenderWidget 节 点 ， 当 出 现 硬 件 加 速 机 制 的 时 候 ， 
可 能 还 需要 创建 相应 的 RenderLayer 节 点 。 同 时 ， 还 要 创建 PluginView 
对 象 ， 并 根据 DOM 元 素 的 属性 来 查找 并 创建 相应 的 实例 。 


第 三 是 绘图 工作 。 本 身 NPAPI 没 有 提供 绘图 的 接口 ， 只 是 让 插件 
将 绘制 完 的 结果 传 给 浏览 器 或 者 提供 一 个 绘制 的 目标 存储 结构 ， 从 而 
让 插件 直接 在 它 上 面 绘制 ， 这 就 是 插件 的 window 和 Windowless 模 式 ， 
关于 这 两 种 模式 ， 后 面 还 会 做 介绍 。 另 外 一 个 方面 是 跟 浏览 器 交互 以 
通知 某 些 区 域 需 要 重 绘 等 消息 。 


虽然 插件 机 制 是 用 来 支持 “object”* 或 者 “embed” 元 素 ， 但 是 ， 该 机 
制 也 能 够 扩展 JavaScript 中 对 象 和 对 象 的 方法 ， 例 如 希望 在 JavaScript 中 
增加 W3C 组 织 定 义 的 一 些 标准 接口 ， 如 设备 相关 的 对 象 和 方法 。 


NPAPI 插 件 昌 然 功能 强大 ， 但 是 ， 通 常 它 是 浏览 器 不 稳定 的 重要 
原因 之 一 ， 这 是 因为 插件 由 各 个 厂家 自行 维护 ， 质 量 和 稳定 性 也 干 差 
万 别 ， 插 件 的 不 稳定 通常 会 导致 浏览 器 的 不 稳定 ， 这 在 现在 多 页 面 同 
时 浏览 的 模式 下 会 带 来 非常 差 的 用 户 体验 。 同 时 ，NPAPI 的 性 能 不 是 
很 高 效 ， 而 且 存 在 一 些 局 限 性 ， 特 别 是 绘图 方面 。 最 后 ，NPAPI 插 件 
拥有 访问 任何 本 地 资源 的 能 力 ， 这 会 带 来 安全 性 问题 ， 所 有 未 经 过 认 
证 的 插件 都 非常 危险 ， 随 意 使 用 第 三 方 插件 的 网 页 也 不 无 可 能 对 系统 
造成 灾难 性 的 后 果 。 这 与 ActiveX 插 件 很 像 ， 它 同样 也 是 很 多 病毒 攻击 
的 对 象 。 因 为 插件 通常 是 网 络 攻击 的 对 象 ， 一 旦 这 些 插件 被 攻击 成 
功 ， 那 么 攻击 者 就 能 够 随意 访问 本 地 资源 。 


在 WebKit 的 这 种 插件 设计 架构 中 ， 泻 染 引 擎 同 插件 的 运行 通常 在 
同一 进程 中 ， 这 一 设计 将 会 带 来 稳定 性 和 安全 性 方面 的 灾难 性 后 果 。 
为 了 避免 这 些 方面 的 问题 ，Chromium 在 WebKiVBlink 插 件 架 构 的 基础 
上 引入 了 跨 进 程 的 插件 机 制 ， 这 为 浏览 器 的 稳定 性 提供 了 保证 ， 下 一 
小 节 将 详细 介绍 。 同 时 ， 考 虑 到 性 能 方面 的 问题 ，Google 提 出 了 新 的 
PPAPI 插 件 机 制 ， 考 虑 到 安全 性 和 支持 本 地 代码 的 问题 ，Chromium3 
入 了 Native Client 机 制 ， 为 安全 性 提供 了 保证 ， 这 在 后 面 也 会 作 详细 介 


JJ 
绍 。 


10.1.2.2 Chromium 的 插件 架构 


为 了 解决 插件 的 稳定 性 问题 ， 同 时 因为 Chromium 的 沙 箱 模型 机 制 
(第 12 章 会 介绍 ， 它 会 限制 插件 访问 本 地 资源 的 能 力 ) ， 插 件 实 例 不 
能 够 在 Renderer 进 程 中 运行 ， 因 为 除了 访问 IO 之 外 ， 没 有 访问 其 他 接 
口 和 资源 的 能 力 ， 所 以 在 Chromium 中 ， 插 件 是 被 放 在 单独 的 进程 中 来 
执行 ， 这 就 是 Chromium 的 插件 多 进程 模型 。 图 10-3 显 示 的 是 Chromium 
的 插件 进程 示例 图 。 


Plugin 进程 


(插件 1) 


10-3 Chromium 的 插件 多 进程 模型 


在 Chromium 中 ， 每 一 个 插件 库 只 会 有 一 个 进程 ， 这 就 是 说 ， 如 果 
有 两 个 或 者 多 个 i E 个 插件 库 ， 那 么 这 些 
Renderer 进 程 会 共享 同一 个 插件 进程 。 因 为 多 个 Renderer 进 程 共享 同一 
种 的 Plugin 进程 ， a 么 Plugin 进 程 如 何 为 它们 服务 呢 ? 答案 是 
Chromium 在 加 载 插件 库 后 为 每 个 插件 使 用 点 在 plugin 进 程 中 创建 一 个 
对 应 插件 实例 (PluginInstance) 。 


值得 注意 的 是 ， 插 件 进程 是 由 Browser 进 程 来 负责 创建 和 销毁 ， 而 
不 是 Renderer 进 程 。 原 因 在 于 Renderer 进 程 没有 创建 的 权限 ， 而 且 
Plugin 进 程 也 应 该 由 Browser 进 程 来 统一 管理 ， 这 样 也 更 方便 。 当 
Plugin 进 程 创 建成 功 时 ，Browser 进 程 会 返回 进程 间 通 信 的 句柄 ， 用 于 


创建 和 Plugin 进 程 通讯 的 PluginChannelHost。 那 它 什 么 时 候 被 销毁 呢 ? 
当 没 有 任何 插件 实例 并 且 空 闲 一 段 事 件 后 ， 它 才 会 被 销毁 ， 这 样 做 的 
好 处 是 避免 频繁 地 创建 和 销毁 Plugin 进 程 。 


图 10-4 描 述 了 Browser 进 程 和 AR 的 通信 机 制 及 其 所 涉及 
的 相关 的 模块 (类 ) 。Browser 进 程 通过 PluginProcessHost 发 送 消息 调 
用 Plugin 进 程 的 函数 ， 响 应 动作 由 PluginThread 完 成 。 而 Plugin 进 程 则 
是 通过 WebPluginProxy 发 送 消息 调 用 Browser 进 程 的 响应 函数 ， 响 应 动 
作 由 PluginProcessHost 完 成 。 


PluginThread ::Channel 2 WebPluginProxy 


Plugin 进程 


图 10-4 ”Brower 进 程 和 Plugin 进 程 的 交互 过 程 


Browser 进 程 和 Plugin 进 程 仅 有 较 少 的 消息 传递 ， 用 于 插件 的 创建 
等 管理 工作 。 其 实 ， 主 要 的 工作 在 Renderer 进 程 和 Plugin 进 程 之 间 ， 机 
制 也 相对 更 为 复杂 一 些 。 根 据 前 面 介 绍 ， HTMLPluginElement 点 是 
DOM 树 中 的 一 个 节点 ， 在 Chromium 的 实现 中 会 包含 一 个 
WebPluginContainerImpl , 1% 73 FA = WebKit::Widget NFR, BM 
Chromium 中 的 一 个 对 PluginView 的 具体 实现 类 ， 而 它 包 含 一 个 
WebPluginImpl， 对 plugin 的 调用 有 WebPluginDelegateProxy 负 责 中 转 。 
在 Plugin 进 程 中 ， 由 WebPluginDelegateStub 处 理 所 有 Renderer 进 程 发 送 
过 来 的 请 求 ， 并 由 WebPlugin-DelegateImpl 调 用 创建 好 的 PluginInstance 
对 象 。PluginInstance 最 终 调 用 PluginLib 读 取 的 插件 库 (libxxx.so) 的 


KAA Oiti, RAT 有 而 对 插件 实现 中 
数 的 调用 ， 则 是 通过 PluginHost 来 完成 。 


PluginHost 主 要 负责 实现 NPN 开 头 的 函数 ， 如 前 面 所 描述 ， 这 些 函 
数 被 plugin 进 程 所 调用 。 可 以 在 plugin 和 renderer 进 程 被 调用 。 z 在 
plugin 进 程 调用 这 些 孙 数 时 ，chromium 会 any eno 的 部 分 函数 ， 
而 这 些 新 的 callback 孙 数 会 调用 NPObjectProxy 来 通过 IPC 发 送 请 求 到 


renderer 进 程 。 


PluginInstance 实 现 了 NPP 开 头 的 函数 ， 被 Renderer 进 程 所 调用 
(WebPluginImpl 通 过 WebPluginDelegateImpl 来 调用 ) ，PluginInstance 
通过 PluginLib 获 得 了 插件 库 中 这 些 国 数 的 地 址 ， 从 而 把 实际 的 调用 桥 
接 到 具体 的 插件 中 。 上 有 具体 的 如 图 10-5 所 示 ， 主 要 结构 来 源 于 Chromium 
项 目的 官方 网 站 ， 略 有 修改 。 


HTMLPlugInElement WebPluginContainerImpl WebPluginImpl 
Renderer 进程 PluginChannelHost WebPluginDelegateProxy 
Plugin 进程 PluginChannel 
WebPluginDelegateStub WebPluginProxy 
W 
WebPluginDelegateImpl 
PluginInstance 

libXXX.so PluginLib PluginHost 


图 10-5 ”Chromium 的 跨 进程 插件 和 Renderer 进 程 交 互 过 程 


对 于 NPObject 相 关 的 函数 调用 ， 有 专门 的 类 来 处 理 。NPObject 的 
调用 或 者 访问 是 双向 的 (renderer 进 程 <->plugin 进 程 ) ， 他 们 的 具体 实 
现 是 通过 NPObjectProxy 和 NPObjectStub 来 完成 。NPObjectProxy 接 受 来 
自 对 方 的 访问 请 求 ， 转 发 给 NPObjectStub， 最 后 NPObjectStub 调 用 真 
正 的 NPObject 并 返回 结果 ， 如 图 10-6 所 示 。 


NPObjectProxy NPObject 


= 
m 
ims 


进程 2 
NPObjectStub 
IPC::Channel 2 IPC::Channel 1 


图 10-6 ”NPObject 对 象 的 跨 进 程 使 用 


10.1.2.3 ”Chromium 插件 的 工作 过 程 


插件 工作 过 程 主要 是 创建 并 完成 插件 和 浏览 器 的 交互 过 程 。 首 先 
来 看 一 下 插件 实例 是 如 何 被 创建 的 ， 图 10-7 给 出 一 个 插件 如 何 被 
Renderer 进 程 触发 创建 的 过 程 。 


V8HTMLEmbedEI HTMLEmbed SubFrameLoad FrameLoaderClie WebPluginimpl WebPluginDel 
ement Element er ntimpl egateProxy 
T T 
1: getinstance 


T 
pii 4: req uestObject| 

| ror 
| | 


1.1.1.3.1.1: openChannelTo Plugin 


1.1.1.3.1.2: 创建 Plugininstance 


1.1.1.3.1.3: 初始 化 Pluginlnstance 


je------ je i 


10-7 ”Renderer 进 程 创建 插件 实例 的 过 程 


如 果 页 面 中 包含 一 个 “embed”* 或 者 “object” 元 素 ，Renderer 进 程 会 
创建 一 个 HTMLEmbedElement 元 素 ， 当 该 元 素 被 JavaScript 代 码 或 者 其 
他 地 方 使 用 的 时 候 ， 会 触发 创建 相应 的 插件 。HTMLEmbedElement 对 
象 会 请 求 创 建 自己 对 应 的 RenderWidget (WebPluginContainerImpl) , 
进而 创建 WebPluginImpl 和 WebPluginDelegate-Proxy。 如 果 该 插件 的 进 
程 还 不 存在 ，WebPluginDelegateProxy 会 发 送 消息 到 Browser 进 程 ， 请 
求 该 进程 来 创建 Plugin 进 程 。Plugin 进 程 被 Browser 进 程 创建 后 ， 会 响 
应 Renderer 进 程 的 请 求 来 创建 PluginInstance 并 将 它 初 始 化 ， 这 样 它 们 
之 间 的 联系 就 建立 好 了 了。 注意， 图 中 的 WebPluginDelegateProxy 类 调用 
的 操作 “创建 和 初始 化 PluginInstance”， 是 通过 进程 间 通 信 发 送 消息 到 
Plugin 进 程 ， 最 终 由 该 进程 完成 的 。 


接 下 来 的 工作 主要 是 浏览 器 和 插件 通过 NPP 和 和 NPN 接口 进行 互相 
调用 ， 这 些 调用 在 Chromium 浏 览 器 中 都 通过 IPC 机 制 来 完成 ， 具 体 的 
过 程 就 是 使 用 图 10-5 所 描述 类 的 调用 过 程 。 


10.1.2.4 Window 和 WindowIess 插 件 


根据 规范 ， 可 以 通过 设置 <embed” 或 者 “object” 元 素 的 属性 来 让 浏 
览 器 来 决定 如 何 提供 绘制 结果 的 存储 方式 。Window 模 式 插 件 由 
Renderer 进 程 提 供 一 个 窗口 (window) ， 插 件 直接 在 该 窗口 上 进行 绘 
制 ， 所 以 它 不 需要 和 网 页 的 内 容 再 进行 合并 ， 而 是 一 个 独立 的 绘制 目 
标 。 而 Windowless 模 式 的 插件 则 不 同 ， 插 件 将 绘制 的 结果 (如 
Pixmap) 通过 共享 内 存 的 方式 (如 Transport DIB) 传递 给 Renderer 进 


程 ，Renderer 进 程 然后 绘制 该 内 容 到 自己 内 部 的 存储 结构 (Backing 
Store) 上 。 


从 上 面 的 论述 不 难看 出 ，Window 模 式 的 性 能 是 要 高 于 Windowless 
的 。 但 是 ， 对 于 Window 模 式 的 插件 来 说 ， 它 不 能 跟 网 页 的 内 部 内 容 构 
成 很 好 的 前 后 关系 ， 例 如 在 网 页 的 某 些 元 素 之 后 ， 某 些 元 素 之 前 ， 这 
不 得 不 说 是 一 个 局 限 。 而 对 于 Windowless 模 式 的 插件 来 说 ， 性 能 较 差 
的 问题 带 来 的 好 处 是 ， 可 以 把 插件 绘制 的 结构 和 网 页 上 的 其 他 内 容 做 
各 种 形式 的 合成 。 


跨 进程 带 来 稳定 性 的 同时 ， 由 于 访问 对 象 和 操作 都 需要 经 过 进程 
间 通 信 ， 所 以 额外 的 负担 也 比较 重 。 为 此 ，Chromium 的 PPAPI 插 件 机 
制 诞生 。 


10.2 Chromium PPAPI 插 件 
10.2.1 原理 


插件 其 实 是 一 种 统称 ， 表 示 一 些 动态 库 ， 这 些 动态 库 根 据 定 义 的 
一 些 标准 接口 可 以 跟 浏览 器 进行 交互 ， 至 于 这 个 标准 接口 是 什么 都 可 
以 ， 重 要 的 是 大 家 都 遵循 它们 ，NPAPI 接 口 标准 只 是 其 中 的 一 种 ， 
为 它 被 广泛 使 用 ， 所 以 被 提 到 的 次 数 也 最 多 。 本 节 介 绍 的 PPAPI 也 是 
一 种 浏览 器 和 插件 交互 的 接口 标准 ， 该 标准 是 由 Google 提 出 ， 在 
Chromium 项 目 中 获得 支持 。 


PPAPI 的 提出 是 因为 NPAPI 的 可 移植 性 和 性 能 存在 比较 大 的 问题 ， 
特别 是 针对 跨 进 程 的 插件 ， 同 时 还 有 插件 需要 2D 和 3D 绘 图 、 声 音 等 问 
题 时 候 就 更 为 棘手 。 早 期 的 阶段 就 是 要 解决 这 些 问 题 ， 同 时 为 了 赢得 
插件 厂商 的 支持 ， 尽 可 能 地 使 用 原来 NPAPI 的 接口 。 现 在 ， 随 着 PPAPI 
的 不 断 发 展 ， 接 口 不 断 发 生 改变 。 后 来 ，PPAPI 也 被 用 在 Native Client 
技术 中 ， 之 后 也 被 逐渐 地 修改 ， 直 到 现在 的 样子 ， 完 整 的 列表 可 以 查 
看 链接 http://code.google.com/p/ppapi/wi/listo 


那么 ， 为 什么 PPAPI 能 够 提供 较 高 性 能 的 绘图 和 声音 等 解决 方案 
E? 前 面 我 们 提 到 ， 在 现在 的 NPAPI 插 件 系统 中 ， 通 常 的 做 法 是 ， 当 
网 页 需要 显示 该 插件 的 时 候 或 者 需要 更 新 的 时 候 ， 它 会 发 送 一 个 失效 
(Invalidate) 的 通知 ， 让 插件 来 绘制 它们 。 而 在 PPAPI 插 件 机 制 中 ， 
它 引 入 了 一 个 保留 (Retained) 模式 ， 其 含义 是 浏览 器 始终 保留 一 个 
后 端 存储 空间 ， 用 来 表示 上 一 次 绘制 完 的 区 域 。 这 个 很 有 用 ， 因 为 
PPAPI 插 件 通常 是 跨 进 程 的 ， 所 以 浏览 器 可 以 绘制 网 页 而 不 需要 锁 ， 
与 此 同时 插件 进程 能 够 在 后 台 绘 制 新 的 结果 。 


PPAPI 插 件 有 两 种 运行 模式 ， 受 信 (Trusted) 插件 和 非 受 信 
(Untrusted) 插件 。 对 于 受信 的 PPAPI 插 件 ， 它 可 以 在 Renderer 进 程 中 
运行 ， 也 可 以 在 另外 的 进程 中 运行 。 对 于 新 版 本 的 实现 ， 架 构 设计 都 
是 基于 IPC 来 设计 的 。 对 于 非 受信 的 PPAPI 插 件 ， 则 可 以 借助 于 使 用 
NativeClient 技 术 来 安全 运行 。 受 信 插 件 是 与 平台 相关 的 ， 可 以 调用 平 
台 相 关 的 接口 。 而 对 于 非 受 信 插 件 而 言 ， 它 们 可 以 是 与 平台 无 关 的 代 
码 ， 可 以 调用 NativeClient 提 供 的 有 限 接口 ， 而 不 能 调用 其 他 接口 ， 这 
个 后 面 再 介绍 。 


在 Chromium 中 ，NPAPI 和 PPAPI 插 件 同时 得 到 支持 ， 都 可 以 在 
“chrome://plugins” 来 查看 ， 前 面 已 经 提 到 过 。 有 趣 的 是 ， 对 于 同一 个 


功能 的 插件 ， 


甚至 可 能 有 两 个 不 同 的 版 本 ， 如 图 10-8 所 示 Flash 的 


NPAPI 插 件 和 PPAPI 插 件 实现 。 


Adobe Flash Player (2 files) - Version: 11.8.800.115 
Shockwave Flash 11.8 r800 


Name: 
Description: 


Version: 
Location: 


Type: 


MIME types: 


Name: 
Description: 
Version: 
Location: 
Type: 


MIME types: 


Shockwave Flash 

Shockwave Flash 11.8 r800 

11.8.800.115 

C:\Users\ \AppData\Local\Google\Chrome\Application\29.0.1547.57\PepperFlash\pepflashplayer.dll 
PPAPI (out-of-process) 

Disable 


MIME type Description File extensions 


application/x-shockwave-flash Shockwave Flash swf 


application/futuresplash FutureSplash Player sp! 


Shockwave Flash 

Shockwave Flash 11.8 r800 

11,8,800,94 
CAWindows\SysWOW64\Macromed\Flash\NPSWF32_11_8_800_94.dll 
NPAPI 


MIME type Description File extensions 


application/x-shockwave-flash Adobe Flash movie .swf 


application/futuresplash FutureSplash movie .sp 


图 10-8 “Chrome 浏览 器 的 NPAPI 插 件 和 PPAPI 插 件 


PPAPI 插 件 同样 使 用 “embed”* 或 者 “object”* 元 素 ， 这 让 网 页 看 起 来 没 
什么 大 的 区 别 ， 所 以 对 于 WebKit 而 言 ， 它 根本 不 会 区 分 背后 的 是 
NPAPI 插 件 还 是 PPAPI 插 件 ， 差 别 在 于 调用 的 接口 不 一 样 而 已 ， 这 样 做 
的 好 处 显而易见 。 


10.2.2 


结构 和 接口 


10.2.2.1 ”代码 结构 


因为 PPAPI 插 件 对 于 WebKit 而 言 是 透明 的 ， 所 以 这 里 不 再 介绍 
WebKit 中 支持 该 插件 的 基础 设施 。Chromium 支 持 跨 进 程 的 PPAPI 插 件 


机 制 ， 所 以 在 代码 结构 上 可 以 充分 看 到 这 一 点 。Chromium 项 目 中 有 3 
个 目录 用 来 支持 这 一 机 制 ， 详 细 结 构 如 图 10-9 所 示 。 


chrome 跟 多 进程 架构 相关 的 PPAPI 插件 辅助 类 


browser/renderer host/pepper Browser 进程 与 插件 相关 的 Host 类 


renderer/pepper Renderer 进程 与 插件 相关 的 Host 类 


content 跟 多 进程 架构 相关 的 PPAPI 插件 辅助 类 
browser/renderer_host/pepper Browser 进程 与 插件 相关 的 Host 类 


renderer/pepper Renderer 进程 与 插件 相关 的 Host 类 


ppapi PPAPI 插件 的 主要 实现 类 
api PPAPI 的 提供 的 编程 接口 的 定义 文件 ，IDL 格式 
c PPAPI 的 提供 的 编程 接口 ，C 语言 风格 
cpp PPAPI 的 提供 的 编程 接口 ，C++ 语 言 风格 
examples 使 用 PPAPI 的 插件 示例 代码 ， 后 面 会 根据 它 做 介绍 
host 为 多 进程 架构 服务 的 基础 类 ， 被 content 中 所 使 用 
native client 支持 Native Client 的 一 些 基础 
PIOXY 代理 机 制 ， 用 在 插件 进程 中 ， 同 host 端 通信 
shared_impl 代理 机 制 ，thunk 等 共享 的 代码 
thunk -个 转 接 层 代码 ， 将 插件 对 浏览 器 的 调用 转 成 C++ 调用 接口 
utility 各 种 辅助 设施 


10-9 支持 PPAPI 插 件 机 制 的 代码 目录 结构 


首先 是 chrome 目 录 ， 它 包含 Renderer 进 程 和 Browser 进 程 对 于 
PPAPI 插 件 的 支持 代码 ， 主 要 是 资源 的 实现 类 。 


其 次 是 content 目 录 ， 同 样 也 包含 了 资源 的 实现 类 ， 但 是 同时 也 有 
支持 跨 进 程 机 制 的 代码 ， 这 会 在 后 面 的 工作 过 程 图 中 有 所 体现 。 


最 后 是 ppapi 目 录 ， 当 然 支持 PPAPI 插 件 的 代码 都 是 在 该 目录 中 ， 
包括 支持 跨 进程 的 基础 代码 ， 它 们 被 Renderer 进 程 和 Browser 进 程 的 支 
持 代 码 所 使 用 。 


读者 可 能 好 奇 为 什么 chrome 目 录 下 的 相关 文件 不 直接 放 在 content/ 
目录 下 ， 这 主要 取决 于 Chromium 项 目的 层次 化 结构 。content 目 录 下 包 
含 一 些 公 共 或 者 基础 的 设施 ， 而 chrome/ 目 录 则 是 跟 浏 览 器 密切 相关 
的 。 例 如 对 于 PPAPI 插 件 机 制 而 言 ， 它 将 PDF 和 Flash 都 放 在 该 目录 
下 ， 而 将 文件 等 放 在 content 目 录 下 。 


10.2.2.2 ”应 用 程序 编程 接口 


同 NPAPI 的 NPN 和 NPP 开 头 的 接口 相似 ，PPAPI 也 需要 双向 调用 的 
编程 接口 ，PPAPI 提 供 了 浏览 器 调用 插件 的 接口 ， 同 时 更 是 提供 了 众 
多 插件 调用 浏览 器 各 种 功能 的 接口 ， 这 非常 不 一 样 ， 因 为 功能 更 为 强 
大 。 


这 些 接口 的 标准 定义 文件 都 位 于 上 面 所 述 的 目录 ppapi/api 中 ， 它 
们 都 使 用 一 种 接口 定义 语言 (IDL，Interface Definition Language) 来 
首 述 。IDL 是 一 种 标准 ， 有 兴趣 的 读者 可 以 查阅 它 的 基本 语法 。 其 中 
以 ppb (ppapi browser) 开头 的 接口 文件 表示 这 是 由 浏览 器 实现 ， 被 
插件 库 所 调用 ; 以 ppp_ (ppapi plugin) 开头 的 接口 文件 表示 这 是 由 插 
件 实现 ， 被 浏览 器 所 调用 ; 而 其 他 以 pp_ 开 头 的 接口 文件 表示 共享 的 接 
口 定义 ， 两 边 都 需要 使 用 ， 主 要 是 一 些 基础 类 定义 等 。 


不 同 于 NPAPI 只 是 提供 C 接 口 ，PPAPI 既 提供 了 C 接 口 ， 同 时 又 提 
供 了 C++ 接口 。C 接 口 主 要 是 函数 指针 和 结构 为 主 ， 而 C++ 接口 则 是 提 
供 各 种 作用 的 类 ， 它 们 分 别 位 于 目录 ppapi/c 和 ppapi/cpp 下 。 因 为 两 个 
定义 的 功能 是 一 致 的 ， 之 后 我 们 都 以 C++ 接口 为 例 来 解释 PPAPI 插 件 机 
制 。 


公共 部 分 的 接口 包括 各 个 基础 数据 ， 如 时 间 、 大 小 、 和 矩形 和 资 
源 ， 这 些 类 会 作为 后 面 定 义 接 口 的 参数 来 传递 ， 对 应 的 接口 例如 
PP_Time、PP_Size、PP_Rect 和 PP_Resource。 这 里 面 非 常 重 要 的 接口 
是 PP_Resource， 它 表示 各 种 类 型 的 资源 ， 例 如 文件 资源 、 音 频 资 源 、 
图 像 资 源 、 图 形 资源 等 。 


由 插件 实现 的 接口 大 致 包括 以 下 几 个 部 分 : 第 一 部 分 是 插件 模块 
和 插件 实例 ， 用 于 初始 化 和 关闭 插件 的 管理 插件 功能 的 接口 ， 例 如 
PPP_InitializeModule()、PPP_ShutdownModule()。 而 插件 的 实例 类 ， 表 
示 一 个 插件 的 实例 对 象 ， 也 就 是 Interface PPP_Instance， 这 里 面包 含 多 
个 函数 ， 如 DidCreate、DidDestroy 等 ， 表 示 当 创建 插件 之 后 ， 浏 览 
调用 它们 ， 以 便 插 件 能 够 做 一 些 后 续 的 辅助 工作 。 第 二 部 分 是 一 些 事 
件 的 通知 接口 ， 表 示 浏 览 器 需要 派发 一 些 消息 给 插件 ， 典 型 的 包括 鼠 
标 事件 、 通 用 消息 传递 接口 、3D 图 形 上 下 文 丢失 事件 和 鼠标 锁定 事件 
Fo 


由 浏览 器 实现 的 接口 ， 主 要 提供 各 种 能 力 给 插件 使 用 ， 这 其 中 包 
括 2D 和 3D 图 形 绘制 接口 、 文 件 IO、 文 件 系统 、 鼠 标 事件 、 网 络 、 游 戏 
手柄 、 时 间 等 ， 这 些 都 是 PPAPI 机 制 中 定义 的 可 以 被 浏览 器 调用 的 资 
源 及 其 编程 接口 ， 读 者 会 发 现 这 些 主要 都 是 为 游戏 的 需求 服务 的 ， 实 
际 上 这 些 机 制 就 是 为 了 高 性 能 的 游戏 而 设计 的 。 


10.2.3 ”工作 过 程 
10.2.3.1 ”基础 设施 


对 于 PPAPI 插 件 的 跨 进程 以 构 ， 同 NPAPI 插 件 的 跨 进程 架构 非 党 类 
似 ， 可 以 说 基本 相同 。 同 样 当 网 页 中 出 现 一 个 “embed” 元 素 的 时 候 ， 
PPAPI 插 件 进程 会 为 它 创建 一 个 插件 实例 ， 这 里 不 再 帝 述 。 


对 于 插件 模块 和 实例 接口 ， 由 插件 进程 直接 调用 并 根据 需要 加 载 
和 创建 它们 ， 非 常 的 简单 明了 。 在 PPAPI 插 件 机 制 中 ， 复 杂 的 是 资源 
的 调用 ， 也 就 是 浏览 器 提供 给 插件 使 用 的 各 种 资源 接口 ， 所 以 下 面 重 
点 介绍 围绕 资源 的 基础 设施 。 


图 10-10 描 述 了 跨 进 程 模式 下 PPAPI 插 件 机 制 中 资源 是 如 何 被 插件 
调用 的 。 如 同 前 面 一 样 ，PPAPI 的 插件 是 在 插件 进程 中 被 加 载 的 ， 当 
它 需 要 使 用 插件 的 时 候 ， 通 过 图 中 Thunk 设 施 将 C 接 口 转 成 C++ 接口 来 
调用 相应 的 PluginResource 类 。 该 类 是 所 有 资源 的 基 类 ， 是 一 个 代理 类 

(只 是 将 请 求 转发 给 真正 的 实现 者 ) ， 负责 发 送 请 求 给 其 他 进程 拥 
有 接受 其 他 进程 发 过 来 的 调用 结果 的 能 力 。 发 送 请 求 由 相应 的 其 他 类 
来 帮助 ， 在 这 里 是 PluginDispatcher 类 和 HostDispatcher 类 。 它 们 都 会 使 
用 IPC::Channel 来 发 送 消息 ， 消 息 会 被 Browser 进 程 和 Renderer 进 程 中 的 
BrowserPpapiHost 类 和 RenderPpapiHost 类 处 理 (它们 依赖 ppapi/host 的 
基 类 ) ， 这 些 请 求 会 发 送 给 ResourceHost 类 来 处 理 ， 以 调用 真正 的 实 
现 函 数 。 读 者 发 现 这 两 个 进程 都 有 ResourceHost 的 子 类 ， 这 是 因为 某 
些 资源 的 实现 在 Renderer 进 程 完 成 ， 例 如 2D 和 3D 图 形 资源 ， 但 是 有 些 
类 必须 在 Browser 进 程 中 处 理 ， 如 文件 和 文件 系统 等 。 
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图 10-10” 跨 进程 的 PPAPI 插 件 机 制 中 支持 资源 的 基础 设施 


10.2.3.2 ”工作 过 程 


这 里 以 Chromium 中 PPAPI 的 一 个 使 用 2D 绘 图 的 例子 来 说 明 PPAPI 
插件 的 工作 过 程 ， 该 例子 位 于 目录 ppapi/examples/2d 下 ， 主 要 有 两 个 
部 分 ， 一 个 是 个 简单 的 HTML 网 页 文件 (2d.html) ， 另 外 一 个 就 是 实 
现 插件 的 文件 (paint manager_example.cc) 。 示例 代码 10-1 是 使 用 插 
件 的 网 页 代码 ， 示 例 代 码 主要 是 “embed” 元 素 ， 同 NPAPI 插 件 的 使 用 方 
式 完 全 一 模 一 样 ， 下 面 会 逐步 讲解 PPAPI 插 件 的 源 代 码 ， 以 及 该 插件 
是 如 何 和 该 网 页 一 起 工作 的 。 


示例 代码 10-1 使 用 插件 的 网 页 代码 


<html> 


<head> 


<title>2D Example</title> 
</head> 
<body> 
<embed id="plugin" type="application/x-ppapi-example- 
2d"> 
</body> 
</html> 


首先 当然 是 插件 的 创建 过 程 。 在 WebKit 中 ， 对 于 PPAPI 和 NPAPI 的 
支持 都 是 类 似 的 ， 所 以 可 以 回顾 10-7 中 的 NPAPI 插 件 被 创建 的 过 程 ， 
二 者 同样 根据 MIME 类 型 来 查找 PPAPI 插 件 机 制 ， 如 果 Chromium 发 现 
查找 到 的 是 一 个 PPAPI 插 件 而 不 是 NPAPI 插 件 ， 那 么 在 创建 
WebPluginContainerImpl 对 象 的 时 候 ， 就 会 首先 创建 一 个 WebPlugin 子 
类 的 对 象 。 注 意 ， 这 里 不 是 一 个 WebPluginImpl 对 象 ， 而 是 一 个 
PepperWebPluginImpl 对 象 。 之 后 它 就 发 送 消息 到 插件 进程 ， 请 求 创建 
一 个 插件 的 实例 。 回 到 插件 进程 ， 它 会 根据 插件 的 注册 信息 查找 需要 
的 插件 并 调用 它 的 构造 遂 数 来 初始 化 该 插件 的 模块 ， 如 示例 代码 10-2 
所 示 的 CreateModule 方 法 。 之 后 需要 调用 该 方法 返回 的 对 象 来 创建 一 
个 插件 实例 的 对 象 ， 如 示例 代码 中 的 CreateInstance 方 法 ， 会 创建 一 个 
插件 类 自 定义 的 一 个 示例 。 


示例 代码 10-2 ”插件 的 实现 代码 部 分 节选 


class MyModule : public pp::Module { 
public: 
virtual pp::Instance* CreateInstance(PP_Instance 


instance) { 


return new MyInstance(instance); 


}; 
namespace pp { 
Module* CreateModule() { 


return new MyModule(); 


} 


根据 示例 代码 10-2 和 示例 代码 10-3， 当 MyInstance 被 创建 的 时 候 ， 
Chromium 会 创建 PPP_Proxy_Instance 对 象 ， 该 对 象 接收 从 Renderer 进 程 
传递 过 来 的 关于 该 实例 的 状态 消息 ， 如 插件 视图 改变 、 销 毁 等 ， 然 后 
再 调用 插件 的 相应 接口 ， 前 面 说 过 这 些 接口 是 在 插件 中 实现 并 由 浏览 
器 调用 的 。 


其 次 来 了 解 资源 的 创建 ， 一 个 插件 实例 可 能 会 用 到 多 个 资源 ， 如 
绘图 资源 、 文 件 资源 等 ， 示 例 代 码 10-3 所 示 的 OnPaint 函 数 使 用 到 了 2D 
绘图 资源 。 由 于 它 使 用 了 PaintManager 类 ， 当 需要 更 新 视图 的 时 候 ， 
该 类 需要 创建 一 个 Graphics2D 资 产 对 象 。 


示例 代码 10-3 ”插件 的 实例 类 自 定义 实现 


Class MyInstance : public’ pp::Instance, public 
pp::PaintManager::Client { 
public: 


MyInstance(PP_Instance instance) { 


} 
virtual bool HandleInputEvent(...) { .. } 


virtual void OnPaint(pp::Graphics2D& graphics_2d, ..) { .. 


private: 
pp::PaintManager paint_manager_; 


}; 


为 了 详细 说 明 它 的 调用 过 程 ， 图 10-11 和 图 10-12 描 述 了 资源 类 对 
象 的 创建 和 资源 类 对 象 接口 的 调用 过 程 ， 分 别 以 插件 进程 和 Renderer 
进程 的 交互 为 例 ， 而 插件 进程 和 Browser 进 程 的 交互 则 是 类 似 的 情况 。 


插件 进程 : 
libppapiplugin.so ppb_graphics_2d_ ResourceCreationPr Graphics2DResource 
(MylInstance) thunk.cc oxy 
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1.2: return 1.1.2: return 1.1.1.2: retum 1.1.1.1: 发 送 创建 资源 的 消息 
< < < ip 


Renderer 进程 : 


HostDispatcher PpapiHost ContentRendererPepp 
erHostFactory 

T T T 

1: OnMessageReceived! 


PepperGraphics2DHost 


1.1: OnHostMsgResourceCreated 
1.2: CreateResourceHost 


1.2.1: Create 


1.2.1.1: 对 象 构造 
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1.3: return 一 一 一 一 一 一 一 一 一 一 


图 10-11 ” Chromium 创建 PPAPI 插 件 的 资源 对 象 的 过 程 


图 10-11 包 括 两 个 步骤 ， 第 一 个 步骤 在 插件 进程 中 完成 ， 第 二 个 步 
又 在 Renderer 进 程 中 完成 。 当 PPAPI 插 件 需 要 创建 一 个 资源 对 象 的 时 


候 ， 会 通过 PPAPI 的 C 接 口 调 用 Chromium 内 部 的 实现 ，Thunk 层 将 其 转 
换 成 C++ 风格 的 调用 。 在 插件 进程 中 ， 会 有 一 个 工厂 类 来 创建 不 同类 
型 的 资源 对 象 。 本 例 中 Graphics2DResource 对 象 在 创建 的 同时 会 发 送 

个 消息 到 Renderer 进 程 ， 这 就 是 第 二 步骤 。Renderer 进 程 同样 包 含 一 
个 能 够 创建 不 同类 型 ResourceHost 对 象 的 工厂 类 ， 以 帮助 完成 资源 对 
象 的 创建 。 


插件 进程 
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Renderer 进程 : 
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插件 进程 : 


PluginDispatcher | craphies20Resouce | PluginResource 


1: OnMessageReceived | 


2:|OnMsgResourceReply 
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Dig patchResourceReply | 
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1 4.1: OnPluginMsgFlushACK 
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图 10-12 ”PPAPI 插 件 调用 资源 对 象 接口 的 过 程 


图 10-12 描 述 了 当 资 源 对 象 创 建 完 之 后 ， 插 件 需要 调用 资源 对 象 的 
接口 来 完成 特定 的 操作 ， 这 一 过 程 可 以 包含 三 个 步骤 ， 其 发 生 在 两 个 
进程 中 ， 图 中 已 有 完整 描述 。 首 先 ， 当 然 还 是 插件 进程 接收 到 插件 的 
调用 请 求 ， 并 把 请 求 发 送 给 Renderer 进 程 。 其 次 是 Renderer 进 程 接收 响 


应 ， 然 后 执行 特定 的 操作 ， 并 将 结果 值 返回 或 者 通知 插件 进程 该 动作 
执行 完成 。 最 后 是 插件 进程 接收 到 返回 值 或 者 动作 执行 完 的 消息 ， 如 
果 需 要 ， 它 还 可 以 调用 插件 的 函数 来 通知 插件 。 当 然 ， 某 些 调用 不 需 
要 从 Renderer 进 程 返回 结果 到 插件 进程 ， 所 以 前 两 步 是 必需 的 ， 但 是 
第 三 步 却 是 可 选 的 。 


10.2.4 Native Client 


10.2.41 基本 原理 


NativeClient， 也 简称 为 NaCl， 是 一 种 阔 箱 技术 ， 它 能 够 提供 给 平 
台 无 关 的 不 受信 本 地 代码 一 个 安全 的 运行 环境 ， 可 以 针对 那些 计算 密 
集 型 的 需求 ， 例 如 游戏 引擎 、 可 视 化 计算 、 大 数据 分 析 、3D 图 形 泻 染 
等 ， 这 些 场合 只 需要 访问 有 限 的 一 些 本 地 接口 ， 不 需要 通过 网 络 服务 
来 计算 ， 以 免 占 用 额外 的 带宽 资源 。 同 时 ， 它 能 够 比较 方便 地 将 原来 
使 用 传统 语言 例如 C++ 编 写 的 库 直接 移植 到 Web 平 台中 。 它 同 
WebGL、WebAudio 这 样 的 技术 所 解决 的 问题 相似 ， 但 是 途径 不 同 ， 
为 这 些 技术 是 规范 (或 者 草案 ) ， 而 NativeClient 技 术 是 Google 提 出 
的 。 使 用 NativeClient 能 够 将 很 多 本 地 库 的 能 力 轻易 地 提供 给 网 页 使 
用 ， 而 不 需要 复杂 的 移植 过 程 ， 给 重用 带 来 很 大 的 方便 。 


本 身 PPAPI 和 NativeClient 没 有 必然 联系 ， 两 者 解决 的 是 不 同方 面 
的 问题 : PPAPI 提 供 插件 机 制 ; NativeClient 使 用 PPAPI 的 插件 机 制 将 使 
用 NativeClient 技 术 编 译 出 来 的 本 地 库 运行 同 浏览 器 交互 起 来 。 只 是 目 
前 NativeClient 是 基于 PPAPI 接 口 来 实现 的 ， 其 实 之 前 NativeClient 也 


经 基于 NPAPI 接 口 来 实现 ， 所 以 能 够 在 Firefox、Safari 和 Opera 浏 览 器 
中 运行 (目前 显然 不 能 了 ) o 


为 NativeClient 使 用 PPAPI 来 提供 一 个 安全 的 运行 环境 ， 本 身 它 
也 是 一 个 PPAPI 插 件 ， 图 10-13 就 是 Chrome 浏 览 器 中 一 个 PPAPI 插 件 
NativeClient。 同 其 他 的 PPAPI 插 件 不 一 样 ， 它 是 一 个 在 Renderer 进 
程 中 运行 的 插件 ， 因 为 这 个 插件 显然 是 受信 的 ， 如 图 中 的 “Type: 
PPAPI(in-process)”o 


Native Client 
Name: Native Client 
Version: 
Location: /home/ chrome/ypstream-working/src/out/Debug/libppGoogleNaClPluginChrome.so 
Type: PPAPI (in-process) 
Disable 
MIME types: MIME type Description File extensions 
application/x- nacl Native Client Executable 


application/x-pnacl Portable Native Client Executable . 


图 10-13 ”NativeClient 的 PPAPI 插 件 


所 以 ， 如 果 需 要 在 网 页 加 入 代码 <embed eel 
type="application/x-nacl"> 表 明 使 用 了 NaCl 技 术 ， 对 于 WebKit 而 言 ， 
就 是 调用 一 个 插件 (不 知 是 什么 类 型 的 插件 ) ， A 
言 ， 它 就 是 调用 了 内 许 的 NaCl PPAPI 插 件 。 因 为 NaCl 还 需要 调用 开发 
者 的 本 地 库 ， 所 以 它 还 需要 跟 本 地 库 来 交互 ， 下 面 来 介绍 PPAPI 插 件 
之 后 的 技术 。 


NaCl 本 质 上 是 一 个 运行 环境 ， 该 子 系统 提供 了 很 少 的 一 些 受 限 系 
统 调 用 接口 和 资源 的 抽象 ， 本 地 库 只 能 调用 它们 ， 而 不 能 任意 使 用 系 
统 调 用 。 与 沙 箱 模 型 的 不 同 在 于 ，NaCl 是 将 一 个 第 三 方 开 发 的 代码 库 
运行 在 受 限 的 环境 中 ， 而 阔 箱 模型 是 将 一 个 进程 运行 在 受 
NaCl 提 供 编译 工具 ， 将 使 用 C/C++ 代码 编写 的 代码 编译 生成 它 能 运 


的 可 执行 格式 nexe。 本 地 代码 调用 的 也 都 是 本 地 接口 ， 同 
JavaScript 的 交互 都 由 NaCl 机 制 和 PPAPI 机 制 来 完成 。 


为 了 直观 理解 NaCl 机 制 ， 用 图 10-14 描 述 了 它 的 架构 图 ， 该 图 参考 
Chromium 官 方 网 站 的 示意 图 ， 为 进行 了 一 些 删 威 和 修改 。 


Renderer 进程 


PPAPI 接口 
PPAPI 插件 一 一 NaCl 


sel_Idr 进程 


— SPRC 消息 通道 , ee 
(开发 者 的 本 地 库 ) NaCl 提供 的 本 地 车 


受 限 系统 调用 接口 


操作 系统 


图 10-14 ”使 用 PPAPI 技 术 的 NaCl 机 制 | 


首先 研究 一 下 Renderer 进 程 ， 如 果 没 有 后 面 的 部 分 ，NaCl 插 件 和 
其 他 PPAPI 插 件 没 有 什么 特别 的 差别 ， 同 样 通过 PPAPI 跟 泻 染 引擎 进行 
通信 。 但 是 这 里 NaCl 插 件 只 是 一 个 桥接 工作 ， 它 将 同 浏览 器 (也 可 以 
说 泻 染 引擎 ) 的 交互 交接 到 使 用 NaCl 技 术 的 本 地 可 执行 库 “nexe”。 


然后 ，Chromium 会 创建 一 个 新 的 进程 ， 该 进程 使 用 了 阔 箱 技术 ， 
只 能 访问 特定 的 系统 接口 ， 这 样 限 定 了 该 进程 中 的 任何 库 都 不 能 超越 


它们 。 在 Renderer 进 程 中 的 NaCl 插 件 使 用 消息 传递 机 制 同 sel_ ldr 进 程 通 
言 。 在 消息 机 制 之 上 是 一 种 称 为 SPRC (简单 的 进程 远程 调用 技术 ) ， 
该 机 制 可 以 实现 PPAPI 的 跨 进程 调用 。 不 过 目前 插件 同 NaCl 的 实现 之 
间 的 通信 机 制 SRPC 已 经 不 支持 ， 都 是 通过 一 个 新 的 接口 PostMessage 
来 实现 的 ， 该 接口 意味 着 都 是 通过 消息 机 制 来 进行 的 。 


最 后 ，sel_ldr 提 供 的 环境 能 够 运行 nexe， 从 图 10-14 中 可 以 看 出 ， 
nexe 是 不 受信 的 部 分 ， 但 是 没关系 ， 该 机 制 可 以 用 一 个 沙 箱 来 将 它 运 
行 在 限定 的 sel_ldr 进 程 中 ，nexe 没 有 办 法 使 用 NaCl 提 供 的 接口 之 外 的 
系统 接口 ， 从 而 保证 了 安全 。nexe 是 本 地 代码 库 ， 所 以 跟 平台 相关 ， 
例如 对 于 32 位 和 64 位 系统 ， 需 要 两 份 不 同 的 代码 库 ， 这 同时 也 造成 了 
库 的 见 余 ， 有 没有 什么 好 的 办 法 能 够 解决 这 个 问题 呢 ? 在 最 近 的 版 本 
中 ，Google 的 工程 师 开 始 将 LLVM 技 术 引 入 到 NaCl 机 制 中 ， 这 就 是 
pNaCl 技 术 。 


10.2.4.2 pNaCI 


nexe 需 要 不 同 的 版 本 ， 一 个 关键 的 问题 在 于 NaCl 提 供 的 编译 工具 
只 能 将 NaCl 的 实现 直接 编译 成 同 硬件 架构 相关 的 本 地 代码 ， 所 以 不 同 
的 平台 需要 生成 不 同 的 本 地 库 。pNaCl 提 供 了 一 套 新 的 工具 ， 该 工具 
能 够 将 C/C++ 代码 编译 成 LLVM 字 节 码 ， 读 者 回忆 一 下 图 9-27 中 关于 
LLVM 的 基本 结构 ，LLVM 能 够 将 C/C++ 代码 转 成 字 节 码 ， 该 字 节 码 是 
平台 无 关 的 ， 而 且 该 字 节 码 可 以 保存 起 来 ， 当 字 节 码 在 某 个 平台 上 运 
行 的 时 候 ，LLVM 的 后 端 能 够 根据 字 节 码 生 成 特定 平台 的 本 地 代码 。 


回 到 pNaCl 上 来 ， 使 用 了 LLVM 技 术 很 明显 地 能 够 带 来 减少 库 的 元 
余 性 的 好 处 ， 这 样 nexe 就 可 以 变 成 pexe (portable exe) 。 对 于 如 何 使 


用 pNaCl， 这 里 不 再 介绍 ， 官 方 网 站 上 有 非常 详细 的 介绍 ， 感 
x 者 请 查 HW 下 AB 的 网 页 


http://www.chromium.org/nativeclient/pnacl/developing-pnaclo 


10.3 JavaScript 引 擎 的 扩 展 机 制 
10.3.1 混合 编程 


混合 编程 由 来 已 入， 因为 浏览 器 能 力 的 不 足 ， 特 别 是 以 前 的 浏览 
器 甚至 不 支持 内 能 视频 和 音频 等 技术 ， 所 以 导致 需要 Flash 等 插件 来 扩 
展 网 页 的 能 力 。 当 然 Flash 插 件 是 由 第 三 方 提供 的 ， 大 家 都 可 以 使 用 。 
还 有 一 种 使 用 场景 ， 那 就 是 网 页 的 开发 者 在 使 用 HTML/JS/CSS 开 发 网 
页 的 时 候 ， 发 现 能 力 不 足 ， 希 望 使 用 传统 语言 例如 C/C++ 来 开发 一 些 
库 ， 这 些 库 可 以 被 网 页 调用 ， 这 样 来 满足 应 用 的 要 求 ， 这 里 称 之 为 混 


合 编程 。 


兴趣 的 


从 上 面 的 介绍 可 以 看 出 ，NPAPI 和 PPAPI 也 能 够 提供 混合 编程 的 能 
力 ， 也 就 是 说 ， 开 发 者 能 够 将 一 些 本 地 代码 提供 的 能 力 提 供给 web 开 
发 者 ， 示 例 代 码 10-4 描 述 了 使 用 PPAPI 技 术 的 混合 编程 。 


示例 代码 10-4 ”使 用 插件 机 制 来 扩展 JavaScript 的 功能 


<script> 
var exam = null; 


window.onload = function() { 


exam = document.getElementById("example"); 
exam.addEventListener('message', handleMessage, false); 
} 
function handleMessage(message) { 

.. // handle results here 
} 
function function1() { 

if (exam) exam.postMessage("function1i"); 
} 
function function2() { 

if (exam) exam.postMessage("function2"); 
} 

</script> 


<embed id="example" type="application/x-example"/> 


class MyInstance : public pp::Instance { 
public: 


virtual bool HandleMessage(const pp::Var& var_message) { 


if (var_message == "functioni") { 
} else if (var_message == "function2") { 
} 

} }; 


从 上 面 实例 中 可 以 看 到 它们 的 工作 方式 ， 两 个 JavaScript 疯 数 
“function1” 和 “function2” 可 以 被 调用 ， 这 两 个 水 数 的 实现 通过 C++ 代 码 


来 完成 ， 因 为 PPAPI 和 NPAPI 插 件 能 够 调用 任何 系统 接口 ， 所 以 开发 者 
甚至 能 够 将 任何 能 力 提 供给 JavaScript 代 码 调用 。 


从 某 种 程度 来 说 ， 使 用 插件 机 制 来 扩展 JavaScript 接 口 有 个 明显 的 
缺陷 ， 就 是 需要 在 DOM 树 中 加 入 一 个 “embed” 节 点 ， 而 且 需 要 提前 完 
成 插件 的 加 载 和 初始 化 (这 在 上 面 的 示例 代码 中 没有 很 好 地 体现 ) 。 
但 是 从 技术 上 来 讲 ， 开 发 者 可 以 通过 插件 机 制 在 JavaScript 引 擎 中 注入 
一 些 JavaScript 对 象 和 方法 ， 使 得 这 些 JavaScript 对 象 和 方法 能 够 调用 本 
地 代码 才能 提供 的 能 力 ， 这 的 确 是 一 种 不 错 的 扩展 JavaScript 引 警方 
式 。 


10.3.2 JavaScript 扩展 机 制 


下 面 看 看 V8 引 敬 和 JavaScriptCore 引 擎 是 如 何 提供 机 制 来 扩展 
JavaScript 引 擎 的 能 力 ， 也 就 是 如 何 使 用 本 地 代码 来 扩充 引擎 中 的 对 象 
和 上 数 。V8 提 供 了 两 种 方式 ， 第 一 种 是 JavaScript 绑 定 ， 第 二 种 是 V8 
的 Extension 机 制 ， 而 JavaScriptCore 提 供 了 JavaScript 绑 定 。 


10.3.2.1 JavaScript Œ 


WebKit 中 使 用 IDL 来 定义 JavaScript 接 口 (对 象 和 方法 ) ， 但 是 它 
又 稍微 不 同 于 IDL 的 标准 ， 对 它 作 了 一 些 改变 ， 以 适应 WebKit 的 需 
要 。 如 果 开 发 者 需要 定义 新 的 接口 ， 那 么 需要 完成 以 下 一 些 步骤 。 


首先 ， 当 然 需 要 定义 新 的 接口 文件 ， 示 例 代 码 10-5 是 一 个 简单 的 
IDL 文 件 ， 它 定义 一 个 新 的 接口 ， 该 接口 名 为 MyObj， 它 包含 一 个 属 


性 和 一 个 函数 ， 该 接口 属于 模块 <mymodule”。 根 据 这 里 的 定义 ， 如 果 
开发 者 需要 在 JavaScript 代码 使 用 它们 ， ANE 
“mymodule.MyObj.myAttr* 和 “mymodule.MyObj.myMethod()”， 看 起 来 
非常 直观 和 容易 理解 。 


示例 代码 10-5 一 个 简单 的 IDL 文 件 


module mymodule { 
interface [ 
InterfaceName=MyObject 
] MyObj { 
readonly attribute long myAttr; 


DOMString myMethod(DOMString myArg); 


} 


当 开 发 者 完成 接口 的 定义 之 后 ， 需 要 生成 JavaScript 引 擎 所 需 的 绑 
定 文件 ， 该 文件 其 实 是 按照 引擎 定义 的 标准 接口 为 基础 ， 来 实现 具体 
的 接口 类 ，WebKit 提 供 了 工具 能 够 帮助 开发 者 自动 生成 所 需要 的 绑 定 
类 ， 根 据 引 擎 的 不 同和 引擎 开发 语言 的 不 同 ， 可 能 有 不 同 的 结果 ， 主 
要 包括 为 JavaScriptCore 和 V8 生 成 的 绑 定 文 件 ， 以 V8 引 警 为 例 ， 使 用 
下 面 的 命令 就 能 够 为 该 IDL 文 件 生 成 结果 。 


perl generate-bindings.pl MyObj.pl --generator=V8 


outputDir=./out 


它 会 生成 两 个 绪 定 文件 V8MyObj.h 和 V8MyObj.cpp， 这 些 绪 定 文 
件 就 是 将 JavaScript 引 擎 的 调用 转 成 具体 的 实现 类 的 调用 ， 示 例 代码 10- 
6 就 是 V8MyObj.cpp 文 件 中 的 一 个 部 分 节选 ， 主 要 是 一 个 属性 和 方法 的 
C++ 代 码 转 接 代码 。 


在 V8MyObj.cpp 中 ， 还 需要 很 多 其 他 桥接 的 代码 ， 它 们 都 是 辅助 
注册 桥接 的 遂 数 到 V83 引 | 擎 的 。 具 体 的 做 法 是 将 示例 代码 10-6 中 的 两 个 
六 数 和 它们 的 信息 ， 放 入 一 个 下 面 的 数组 中 。 


{"myAttr", MyObjV8Internal: :myAttrAttrGetter,0,0 /* no data 
*/, static cast<v8:: AccessControl> 
(v8: :DEFAULT), static cast<v8::PropertyAttribute> (v8::None), © 


/* on instance */} 


之 后 将 通 过 vs 的 注册 HR 数 
V8DOMConfiguration::configureTemplate ， 将 这 些 信息 注册 到 引擎 中 
去 ， 有 兴趣 的 读者 可 以 自行 根据 上 面 的 命令 来 生成 该 文件 并 理解 这 些 
辅助 代码 。 


示例 代码 10-6 ”为 V8 引 擎 生成 的 绑 定 函数 


static v8: :Handle<v8: :Value> 
myAttrAttrGetter(v8::Local<v8: :String> name, const 
v8: :AccessorInfo& info) 


{ 
INC_STATS("DOM.MyObj .myAttr._get"); 


MyObj* imp = V8MyObj::toNative(info.Holder()); 


return v8Integer(imp->myAttr(), info.GetIsolate()); 


static v8::Handle<v8::Value> myMethodCallback(const 
v8::Arguments& args) 
{ 
INC_STATS("DOM.MyObj .myMethod") ; 
if (args.Length() < 1) 


return 
throwNotEnoughArgumentsError(args.GetIsolate()); 
MyObj* imp = V8MyObj::toNative(args.Holder()); 
EXCEPTION_BLOCK(g*, myArg, 
V8g: :HasInstance(MAYBE_MISSING_PARAMETER 
(args, 0, DefaultIsUndef ined) ) 2 


V8g::toNative(v8: :Handle<v8: :Object>:: 
Cast (MAYBE_MISSING_PARAMETER(args, ©, DefaultIsUndefined) ) ) 
: 0); 
return v8String(imp->myMethod(myArg), 


args.GetIsolate()); 
} 


绑 定 文件 当然 需要 调用 开发 者 具体 实现 部 分 的 代码 。 根 据 规 则 ， 
本 例 需 要 包含 开发 者 实现 的 MyObj.h 文 件 和 MyObj 类 ， 示 例 代 码 10-7 就 
是 所 要 实现 的 类 ， 开 发 者 只 需要 将 两 个 图 数 实现 即 可 被 JavaScript 引 警 
所 调用 。 


示例 代码 10-7 MyObj 的 实际 实现 类 一 MyObj.h 


Class MyObj { 
public: 


v8::Handle<v8::Value> myAttr() { 


v8:: Handle<v8::Value> myMethod(const v8::Arguments& 


JavaScript 绑 定 机 制 的 一 个 问题 就 是 它 需要 和 JavaScriptCore 引 擎 或 
者 是 V8 引擎 一 起 编译 ， i ana Reg 
生成 本 地 代码 ， 而 不 能 在 引擎 执行 之 后 动态 地 注入 这 些 本 地 代码 ， 这 
限制 了 它 的 使 用 场景 ， a e 
地 代码 来 提供 一 些 新 对 象 和 函数 ， 以 被 JavaScript 代 码 直接 调用 。 


10.3.2.2 V8 扩展 
除了 JavaScript 绑 定 机 制 之 外 ，V8 引 擎 男 外 又 提供 一 种 能 够 动态 扩 
展 的 机 制 ， 它 无 须 跟 V8 引 擎 一 起 编译 ， 因 而 有 很 大 的 灵活 性 。 


它 的 基本 原理 是 提供 一 个 基 类 “Extension” 和 一 个 全 局 的 注册 函 
数 ， 对 于 想 扩 展 JavaScript 接 口 的 开发 者 而 言 ， 只 需要 两 个 步骤 即 可 以 
完成 扩展 JavaScript 能 力 ， 如 示例 代码 10-8 所 描述 的 过 程 。 


示例 代码 10-8 fEFAV8Nextension Kit A WAN 


class MYExtension : public v8::Extension { 


public: 
MYExtension() : v8::Extension("v8/My", "native function 
my();") {} 
virtual v8: :Handle<v8: :FunctionTemplate> 
GetNativeFunction( 


v8: :Handle<v8::String> name) { 
// 可 以 根据 name 来 返回 不 同 的 函数 


return v8::FunctionTemplate: :New(MYExtension: :MY); 


static v8::Handle<v8::Value> MY(const v8::Arguments& 
args) { 
// Do sth here 
return v8::Undefined(); 
} 
}; 
MYExtension extension; 


RegisterExtension(&extension) ; 


第 一 个 步骤 是 基于 Extension 基 类 构建 一 个 它 的 子 类 ， 并 实现 它 的 
重要 虚 国 数 ， 那 就 是 GetNativeFunction ， 根 据 参数 name 来 决定 返回 实 
现 函 数 。 第 二 个 步骤 就 是 创建 一 个 该 子 类 的 对 象 ， 并 通过 注册 函数 将 
该 对 象 注册 到 V85 引 警 ， 这 样 当 JavaScript 调 用 “my” 国 数 的 时 候 就 能 够 
找到 并 执行 响应 的 函数 。 


从 示例 代码 10-8 可 以 看 出 ， 它 只 是 调用 V8 的 接口 来 注入 新 函数 ， 
所 以 这 是 一 种 动态 扩展 机 制 ， 非 常 的 方便 ， 但 是 缺点 是 ， 理 论 上 性 能 
可 能 没有 JavaScript 绑 定 机 制 高 效 ， 因 而 只 是 在 一 些 对 性 能 要 求 不 高 的 
应 用 场景 才 会 被 使 用 到 。 


10.4 Chromium 扩展 机 制 | 
10.4.1 原理 


Chromium 的 扩展 (Extension) 机 制 ( 心 原先 是 Chromium 推 出 的 一 
项 技术 ， 访 机制 能 够 扩展 浏览 器 的 能 力 ， 例 如 笔者 使 用 的 一 个 扩展 实 
例 名 为 “switchy proxy”， 它 可 以 帮助 用 户 方便 的 切换 Chromium 浏 览 
代理 ， 但 是 也 仅 此 而 已 。 本 质 上 ， 它 其 实 就 是 浏览 器 能 力 的 简单 扩 
展 ， 而 对 于 一 些 本 地 的 功能 ， 如 书签 、USB、 监 牙 、 电 源 管理 等 ， 该 
机 制 并 没有 这 方面 的 能 力 。 


一 个 Chromium Extension 的 实例 其 实 就 是 一 个 网 页 加 上 JavaScript 
代码 和 CSS 样 式 代 码 。 当 然 ， 在 Extension 中 ， 开 发 者 也 可 以 使 用 
NPAPI 插 件 和 PPAPI 及 NaCl 机 制 技 术 来 扩展 网 页 能 力 ， 所 以 它 同 这 些 
技术 没有 冲突 ， 相 反 ，Chromium Extension 机 制 可 能 需要 这 些 技术 以 
实现 特定 功能 。 


当然 ，Chromium Extension 机 制 的 目标 远 不 止 这 么 简单 ， 扩 展 浏 
览 器 功能 的 Extension 只 是 其 中 一 个 很 小 的 功能 。 随 着 该 机 制 的 不 断 发 
B, Extension 机制 已 经 被 用 来 支持 Web 应 用 程序 ， 也 就 是 使 用 
HTML5、JavaScript、CSS 等 技术 来 开发 应 用 程序 ， 该 应 用 程序 可 以 使 


用 Chromium 浏 览 器 来 运行 ， 而 用 户 获得 的 体验 同 本 地 应 用 程序 非常 接 
近 ， 听 起 来 非常 吸引 人 吧 。Chromium 打 造 了 一 个 依赖 于 Web 的 运行 平 
台 ， 使 用 扩展 机 制 的 网 页 已 经 可 以 简单 称 之 为 Web 应 用 。 如 果 读 者 认 
为 功能 还 不 够 ， 也 可 以 将 其 理解 为 初级 阶段 ， 但 是 它 实 实 在 在 将 网 页 
扩展 到 Web 应 用 的 范畴 。 在 Google 的 Web Store 名 中 ， 读 者 可 以 发 现 两 
个 类 别 ， 包 括 传统 的 Extension 和 Web 应 用 。 从 用 户 的 角度 看 ， 普 通 扩 
展 和 Web 应 用 的 区 别 在 于 普通 插件 只 是 Extension 在 当前 窗口 运行 ( 当 
然 也 不 是 绝对 的 ， 但 是 工作 机 制 与 Web 应 用 的 确 不 一 样 ) ， 而 Web 应 
用 是 一 个 独立 的 窗口 。 


10-15 是 Chrome 浏 览 器 中 已 经 安装 的 Extensions (Google Docs) 
和 Web 应 用 (Cut the Rope) ， 读 者 可 以 通过 在 地 址 栏 输入 


“chrome://extensions/” 来 查看 它们 。 


Extensions 


Load unpacked extension... Pack extension... 


Cut the Rope 18 


Ge 


Permissions Visit website 


ID: jfbadindcminbkfojhlimnkgaackjmdo 


Google Docs 0.5 


Permissions Visit website 


ID: aghghmighlieiainnegkcijnfilokake 


Allow in incognito 


10-15 Chromium 浏览 器 中 已 安装 的 Extensions 和 Web 应 用 


在 目前 的 Chromium 项 目 中 ， 对 于 Web 应 用 ，Chromium 根 据 特 性 将 
其 分 成 两 类 ， 第 一 种 叫做 Host App， 另 外 一 种 叫做 Packaged App。 前 
面 一 种 表示 将 网 络 上 的 资源 直接 变 成 一 个 Web 应用， 所 以 它 需要 使 用 
外 部 的 资源 才能 够 工作 ， 而 对 于 后 一 种 ， 该 Web 应 用 所 需要 的 文件 和 
资源 都 包含 在 该 应 用 中 ， 而 不 需要 外 部 的 资源 ， 所 以 对 于 那些 离线 应 
用 特别 有 用 ， 这 让 使 用 者 感觉 更 像 本 地 应 用 。 关 于 W3C 和 和 Chromium 的 
Web 应 用 详细 情况 ， 我 们 将 在 第 15 章 重点 讲解 ， 这 里 只 是 一 个 简单 的 


介绍 。 


因为 目前 的 网 页 只 是 由 HTML5、JavaScript 和 CSS 等 文件 组 成 ， 所 
以 还 需要 其 他 辅助 功能 才能 形成 一 个 Chromium 的 扩展 实例 。 
Chromium 的 Extension 机 制 使 用 一 个 清单 文件 (manifest.json) 来 描述 
Extensions 所 需要 的 文件 和 资源 等 ， 这 样 使 得 它 看 起 来 更 像 一 个 应 用 程 
序 ， 因 为 现在 很 多 应 用 程序 都 是 使 用 该 种 方式 ， 例 如 Android 平 台 上 的 
AndroidManifest.xzml， 或 者 wW3C 为 Web 应 用 定义 的 widget 方式 ， 示 例 代 
码 10-9 是 一 个 简单 的 清单 文件 实例 。 


熟悉 JavaScript 语 言 的 开发 者 可 以 发 现 ， 它 其 实 是 一 个 JSON 格 式 
的 文件 ， 里 面 的 属性 名 也 非常 的 直观 ， 例 如 Extension 的 名 字 、 版 本 
号 、 应 用 图 标 等 。 值 得 注意 的 是 ， 它 包含 了 一 个 属性 “permissions”， 
该 属性 设置 了 该 Web 应 用 能 够 访问 哪些 功能 ， 例 如 “plugins” 表 明 该 
Extension 能 够 使 用 NPAPI 插 件 ，“otification” 表 示 可 以 从 该 Extension 发 
出 通知 ， 这 也 同 移动 平台 上 的 本 地 应 用 有 类 似 的 地 方 。 


示例 代码 10-9” Chromium Extension 的 清单 文件 (manifest.json) 


"name": "An Extension", 


"description": "Just an example", 
"version": "1", 
"app" ‘ { 

"launch": { 


"web_url": "http://blog.csdn.net/milado_nju/" 
} 
ty 
"icons": { 


"128": "icon_128.png" 


ty 
" 1 ` Ma 
permissions": [ 
"notifications", 
"plugins", 
"management" 


] 


其 实 ， 上 面 提供 的 这 些 权 限 所 使 用 的 功能 ， 有 些 在 HTML5 中 并 没 
有 被 定义 ， 例 如 “management”， 但 是 Chromium 的 这 些 Extension 实 例 能 
够 使 用 它们 ， 原 因 在 于 Chromium 提 供 了 一 些 JavaScript 接 口 ， 这 就 是 著 
名 的 “chrome.*” 应 用 程序 编程 接口 。 本 质 上 ， 它 们 是 一 系列 的 
JavaScript 接 口 ， 包 括 标签 、 管 理 、 历 史记 录 、USB 等 ， 功 能 还 是 非常 
的 丰富 。 当 Chromium 的 Extension 实 例 需 要 使 用 这 些 接口 的 时 候 ， 必 须 
在 该 清单 文件 中 申明 它们 ， 否 则 Chromiunm 会 拒绝 它们 的 请 求 。 


对 于 Chromium 的 Extension 实 例 和 Web 应 用 ， 它 们 会 共享 一 些 接 
口 ， 但 是 两 者 还 会 提供 不 同 的 接口 ， 这 是 由 于 各 自 的 目的 不 同 。 对 于 


AN Extension X HI m A, X £ A LA “alarms”, “bookmarks” , 
“cookies” 和 “runtime” 等 。 而 对 于 Web 应 用 而 言 ， 它 们 可 以 使 用 
“app.runtime” “app.window” “bluetooth” 和 “runtime” 等 。 这 些 接口 也 
是 对 JavaScript 能 力 的 一 种 扩展 ， 不 同 于 NPAPI 和 PPAPI 使 用 的 扩展 机 
制 ，“chrome.*” 接 口 使 用 一 种 新 的 机 制 来 处 理 多 进程 之 间 的 通信 ， 这 
依然 是 消息 传递 机 制 。 


10.4.2 基本 设施 


针对 Chromium 的 Extension 机 制 ， 主 要 是 解决 两 个 大 方面 的 问题 ， 
第 一 是 Extension 实 例 的 管理 工作 ， 包 括 安装 、 更 新 、 删 除 等 ; 第 二 是 
Extension 实 例 是 如 何 运行 的 。 对 于 第 一 个 问题 ， 相 关 的 过 程 比较 复 
杂 ， 这 里 不 便 介 绍 。 笔 者 主要 介绍 第 二 个 问题 ， 包 括 Extension 运 行 时 
需要 涉及 到 的 基础 设施 ， 它 同 本 章 的 重点 JavaScript 扩 展 密 切 相 关 ， 由 
于 Extension 运 行 时 需要 调用 “chrome.*” 接 口 ， 我 们 必须 了 解 这 些 接口 
是 如 何 被 扩展 和 实现 的 。 


从 基本 过 程 上 来 看 ， 简 单 地 讲 应 该 是 Chromium 的 Extension 机 制 在 
V8 引 警 中 注入 一 些 代 码 ， 然 后 当 JavaScript 代 码 调 用 这 些 接口 的 时 候 ， 
V8 引 擎 调用 注入 的 本 地 人 代码， 这些 代码 会 将 调用 接口 的 请 求 从 
Renderer 进 程 发 送 给 Browser 进 程 。 在 Browser 进 程 中 ， 接 收 这 些 请 求 并 
派发 给 相应 的 实现 类 ， 请 求 完成 后 按 需要 返回 调用 结果 。 


首先 来 看 Renderer 进 程 ， 图 10-16 是 运行 Extension 实 例 时 所 使 用 的 
一 些 主要 类 ， 简 单 介绍 如 下 。 


ik 


—oO 


ChromeV8Context ModuleSystem NativeHandler 
-v8::Context v8_context_ <> -native_handler_map_ <> in +New!Instance() 
-module_system_ +RegisterNativeHandler() AN 

extensions:: Dispatcher 
-request_sender_ RequestSender - - 
-extensions_ ponda requis. PI | ObjectBackedNativeHandler 
-ChromeV8ContextSet v8_context_set_ +StarfRequest() +Router() 
+DidCreateScriptContext() < +HandleResponse() AN 
+RegisterNativeH andlers() 
T 


V 
EventBindings ChromeV8Extension | 
+ChromeV8Extension Create() ———— [77077777A 


10-16 ”Renderer 进 程 中 Extension 运 行 时 所 需 的 类 


ChromeV8Context : 对 V83| 擎 上 下 文 对 象 的 一 个 简单 封装 ， 帮 
助 注 入 代码 和 拥有 Extension 实 例 的 本 地 实现 水 数列 表 。 
ModuleSystem : 管理 所 有 注册 的 “chrome.*” 接 口 ， 当 然 接口 的 具 
体 实现 在 Browser 进 程 中 (读者 考虑 一 下 为 什么 呢 ) ， 这 里 主要 是 
注册 回调 的 函数 ， 这 些 回调 函数 会 将 对 接口 的 调用 发 送 请 求 给 
Browser 进 程 的 具体 实现 类 。 

NativeHandler ’ ObjectBackedNativeHandler ’ 
ChromeV8Extension : 接口 类 (继承 关系 ) ， 用 于 表示 每 个 
“chrome.*” 的 接口 ， 至 于 为 什么 有 几 层 继承 是 因为 需求 ， 同 时 需 
要 注入 管理 的 回调 疯 数 。 

Dispatcher : 该 类 负责 同 Renderer 进 程 创建 过 程 交 互 ， 也 就 是 说 
它 知道 什么 时 候 该 注入 这 些 回 调 函 数 。 

EventBindings : 实现 chrome.events 接 口 的 辅助 类 ， 它 会 定义 一 个 
ChromeV8Extension 的 子 类 。 


下 面 是 Browser 进 程 的 相关 类 ， 如 图 10-17 所 示 ， 相 对 比较 简单 一 


ExtensionHost ExtensionFunctionDispatcher ExtensionFunction 


-extension_function_dispatcher_ +DispatchWithCallback() _ _ _ssJ+Run() 
+OnRequest() +OnExtensionFunctionCompleted() +Runimpl() 


Bookmarks GetFunction BookmarksFunction AsyncExtensionFunction 
> 


10-17 Browser 进程 中 Extension 运 行 时 所 需 的 类 


e ExtensionHost : 负责 处 理 请 求 的 消息 ， 并 回复 请 求 结果 。 

。 ExtensionFunctionDispatcher : 将 请 求 转 换 成 对 ExtensionFunction 
的 调用 ， 因 为 如 chrome.boomarks 这 样 的 接口 ， 包 含 多 个 函数 ， 这 
里 每 个 函数 对 应 于 一 个 ExtensionFunction 对 象 。 

e ExtensionFunction ` AsyncExtensionFunction N 
BookmarksFunction #] Bookmarks-GetFunction : 用 于 表示 接口 
中 的 函数 ， 而 BookmarksGetFunction X} W A A RM = 


“chrome.bookmarks.get()”o 


下 面 来 看 看 Chromium 是 如 何 进行 “chrome.*” 的 接口 初始 化 工作 ， 
主要 是 Renderer 进 程 的 工作 的 。 


首先 当然 是 网 页 的 解释 工作 ， 在 创建 Document 对 象 的 时 候 ， 
WebKit 使 用 ScriptController 类 来 注入 Chromium 的 Extension 机 制 所 需 
的 代码 ， 这 里 会 调用 类 Dispatcher， 该 类 此 时 创建 一 个 ModuleSystem 对 
象 ， 并 将 各 种 各 样 的 NativeHandler 对 象 注册 ， 这 里 的 NativeHandler 就 
是 各 种 各 样 的 “chrome.*” 的 接口 。 


然后 在 注册 这 个 NativeHandler 的 时 候 ， 每 个 该 类 的 对 象 表示 一 个 
接口 ， 每 个 类 别 的 接口 创建 一 个 ObjectTemplate ， 该 对 象 包含 一 个 
FunctionTemplate 对 象 ， 当 调用 该 接口 的 任何 函数 的 时 候 ， 就 会 调用 
ObjectBackedNativeHandler 类 的 Router 国 数 。 


最 后 ， 在 注册 完 之 后 ， 完 成 网 页 演 染 的 工作 ， 当 执行 到 JavaScript 
代码 调用 “chrome.*" 接 口 的 时 候 ， 融 会 调用 Router 国 数 ， 之 后 就 使 用 请 
息 传 递 机 制 将 请 求 传递 给 Browser 进 程 。 


10.4.3 ”消息 传递 机 制 


Chromium 的 扩展 机 制 的 一 个 重要 的 特性 是 使 用 消息 传递 机 制 来 提 
供 大 量 JavaSscript 新 的 接口 ， 前 面 已 经 提 到 V85 引 擎 会 调用 Router 方 法 ， 
这 里 详细 解释 一 个 接口 中 的 国 数 是 如 何 使 用 消息 传递 机 制 来 工作 的 。 


可 以 结合 图 10-18 和 图 10-19 来 理解 Extension 机 制 中 对 “chrome.*” 接 
口 的 函数 调用 过 程 ， 图 中 的 数字 (1、2、3) 表示 调用 顺序 ， 首 先是 
Renderer 进 程 中 的 “1” 过 程 ， 其 次 是 Browser 进 程 中 的 “2” 过 程 ， 最 后 是 
Renderer 进 程 中 的 “3” 过 程 ， 其 中 两 个 进程 都 是 通过 消息 传递 机 制 实 
现 ， 这 里 消息 是 将 JavaScript 国 数 中 的 所 有 调用 转 成 字符 串 来 处 理 ， 也 
就 是 当 调 用 某 个 接口 的 时 候 ， 前 先 在 Renderer 进 程 中 ，V8 的 引 筝 将 使 
用 接口 名 来 查找 NativeHandler， 使 用 字符 串 来 表示 调用 函数 名 ， 并 将 
参数 序列 化 成 JSON 格 式 的 字符 串 传 递 给 Browser 进 程 ， 这 些 对 孙 数 的 
调用 都 是 借助 函数 名 和 JSON 字 符 串 ， 称 为 Extension 机 制 的 消息 传递 机 
制 ， 如 图 10-18 所 示 。 


si StartRequest, 
1.1.1: Send(inessage) 


FunctionCallback Chrome ObjectBacked Request Dispatche RenderView 
Arguments V8Context | | NativeHandler Sender ee Impl 
| | | | 
| | 


| 1: Ropter() 


| 3: OpExtensionRe 
311: HandleRespong¢ 
3.1.1: CallNfoduleMethod 


Bookmark 
sGetTree 
Function 


| | 
| | 
| | 
| | 
| | 
| | 
| | 
2: OhMessageRecelved 


2.1: Dispatch 
na 2.1.1: Run 


.1.1: Runlmpl 


10-19 “Chromium 在 Browser 进 程 中 的 处 理 Extension 的 函数 调用 


然后 是 图 10-19 中 的 “2” 过 程 ， 经 过 一 系列 的 处 理 之 后 ， 最 终 会 调 
用 具体 的 函数 实现 类 ， 这 里 就 是 BookmarkGetTreeFunction， 读 取 JSON 
字符 串 并 计算 得 出 结果 返回 给 Renderer 进 程 。 


最 后 就 是 图 10-18 中 的 “3” 过 程 ， 得 到 回复 结果 之 后 ， 最 后 需要 将 
它们 传 入 V835| 擎 ， 这 里 就 是 使 用 ChromeV8Context， 它 包含 一 个 V85| 
营运 行 上 下 文 ， 使 用 该 上 下 文 将 结果 传 入 V83| 擎 。 


上 面 这 些 过 程 在 实际 的 实现 过 程 更 为 复杂 ， 这 里 省 略 了 中 间 过 程 
中 的 一 些 国 数 调 用 ， 但 是 并 不 妨碍 读者 理解 。 经 过 上 面 这 三 个 过 程 ， 
就 完成 了 一 次 对 “chrome.*” 接 口中 定义 的 水 数 实现 的 调用 过 程 。 


ee 
用 ， 因 为 扩展 能 力 和 支持 Web 应 用 程序 的 需要 依然 存在 。 相 信 
些 介绍 ， 读 者 可 以 了 解 它们 内 在 的 机 制 和 展现 出 来 的 能 力 ， mene 行 
一 些 实现 上 的 尝试 。 


(为 了 避免 跟 通用 的 “JavaScript 扩 展 机 制 ” 产 生 名 字 上 的 混淆 ， 后 面 一 律 称 为 Chromium 
Extension 机 人 制 | 


(2) 一 个 网 络 应 用 商店 ， 里 面包 含 了 各 种 HTML5 应 用 程序 或 者 Chromium Extension 应 用 实 
现 


第 11 章 ”多 媒体 


说 到 浏览 器 对 多 媒体 的 支持 ， 不 得 不 提 的 就 是 Flash 插 件 和 HTML5 
之 争 。Flash 对 Web 的 发 展 起 了 非常 重要 的 作用 ， 它 能 够 支持 视频 、 音 
频 、 动 画 等 多 媒体 功能 ， 虽 然 现 在 大 家 都 在 讨论 web 前 端 领域 是 否 
的 多 媒体 发 展 历程 ， 然 后 详解 现在 HTML5 中 引入 的 多 媒体 技术 。 从 整 
体 上 来 看 ， 这 的 确 是 一 幅 欣 欣 向 荣 的 景象 : 从 没有 原生 支持 和 仅 是 第 
三 方 插件 支持 ， 到 简单 的 音 视频 播放 ， 从 音频 播放 再 到 使 用 WebAudio 
技术 来 处 理 音 频 ， 最 后 再 到 网 络 实时 视频 会 议 ，Web 被 引入 了 极其 强 
大 的 能 力 ， 前 所 未 有 。 我 们 有 理由 相信 ， 这 绝对 不 是 终点 。 


11.1 HTML5 的 多 媒体 支持 


在 HTML5 规 范 出 来 之 前 ， 网 页 对 视频 和 音频 播放 的 支持 基本 上 都 
是 依靠 (Flash) 插件 来 实现 ， 因 为 HTML 语 言及 相关 规范 并 没有 定义 
视频 和 音频 方面 的 功能 。 在 HIML5 之 后 ， 这 种 情况 发 生 了 很 大 的 变 
化 ， 同 文字 和 图 片 一 样 ， 音 频 和 视频 直接 成 为 HTML 一 系列 规范 中 第 
一 等 公民 ， 千 万 不 要 小 看 第 一 等 公民 的 地 位 ， 这 不 仅仅 说 明了 网 页 中 
可 以 直接 支持 多 媒体 的 播放 ， 而 且 还 有 很 多 额外 的 优点 。 


首先 是 JavaScript 接 口 的 支持 ， 开 发 者 可 以 使 用 JavaScript 接 口 来 方 
便 地 控制 音 视频 的 播放 ， 实 现 例如 播放 、 停 止 和 记录 等 功能 。 


其 次 是 HTML5 支 持 音 视频 的 真正 强大 之 处 一 一 多 媒体 (如 视频 ) 
与 图 片 一 样 可 以 用 其 他 技术 来 进行 操作 ， 例 如 使 用 CSS 技 术 来 修改 它 


的 样式 (如 3D 变 形 ) 。Web 开 发 者 可 以 将 视频 同 Canvas2D 或 者 WebGL 
结合 在 一 起 ， 而 之 前 Flash 插 件 中 的 视频 是 不 能 (或 者 轻易 ) 做 到 的 。 
回顾 第 二 章 的 示例 代码 2-2 中 , “video” 元 素 同 “canvas” 元 素 一 样 被 设置 
了 3D 变 形 属性 ， 图 2-4 就 是 它 的 显示 结果 。 


如 果 读 者 觉得 HTML5 只 是 提供 了 音频 和 视频 的 播放 功能 ， 那 就 显 
然 低 估 了 它 的 能 力 ， 在 HTML5 中 ， 对 于 多 媒体 的 支持 大 概 包 括 以 下 几 
个 部 分 。 


第 一 个 是 HTML 的 元 素 “video”， 它 用 于 视频 (当然 也 包括 音频 ) 
的 播放 。 第 二 个 是 HTML 元 素 “audio”， 它 用 于 单纯 的 音频 播放 。 第 三 
个 是 可 以 将 多 个 声音 合成 处 理 的 WebAudio 技 术 。 第 四 个 则 是 将 照相 
机 、 麦 克 风 功能 与 视频 、 音 频 和 通信 结合 起 来 使 用 的 最 新 技术 
WebRTC (网 络 实时 通信 ) ， 这 一 HIML5 对 于 多 媒体 领域 的 重大 支 
持 ， 使 得 Web 领域 使 用 视频 对 话 和 视频 网 络 会 议 成 为 了 现实 。 


目前 各 个 浏览 器 对 于 HTML5 中 多 媒体 的 支持 正在 得 到 逐步 地 增 
强 ， 尤 其 是 对 HTML5 的 “video” 和 “audio” 元 素 的 支持 ， 这 一 趋势 在 移 
动 操作 系统 上 体现 得 更 为 明显 。 因 为 很 多 移动 浏览 器 其 实 不 支持 Flash 
插件 ， 这 直接 导致 众多 视频 内 容 提 供 商 需要 将 视频 和 音频 改 为 采用 
HTML5 标 准 的 格式 才能 正常 提供 内 容 。 对 于 WebRTC 技 术 ， 基 于 对 规 
范 的 支持 目前 走 在 前 面 的 是 Chrome 和 Firefox 浏 览 器 ， 笔 者 已 经 成 功 使 
用 了 Chrome 和 Firefox 来 进行 网 络 视频 对 话 ， 这 的 确 是 一 项 不 可 思议 的 
新 技术 。 一 个 完整 的 多 媒体 解决 方案 ， 通 常 需要 WebKit 和 Chromium 两 
个 项 目 共 同 努 力 ， 一 起 解决 相关 问题 ， 从 总 体 上 看 ， 其 大 致 有 四 个 部 
分 。 


一 部 分 当然 是 WebKit 的 基础 部 分 ， 包 括 对 规范 的 支持 ， 这 其 中 
有 DOM 树 、RenderObject 树 和 RenderLayer 树 等 对 多 媒体 方面 的 支持 。 


第 二 部 分 是 Chromium 的 桥接 部 分 ， 也 就 是 将 WebKit 的 接口 桥接 到 
Chromium 项 目 中 来 ， 包 括 接口 的 桥接 、 泻 染 方面 的 桥接 等 。 


三 部 分 是 依赖 其 他 多 媒体 库 ， 包 括 fftmpeg、1libjingle 等 第 三 方 项 
目 ， 使 用 它们 来 做 多 媒体 方面 的 处 理 。 


第 四 部 分 是 Chromium 对 多 媒体 资源 获取 和 使 用 多 媒体 库 来 帮助 解 
码 等 管线 化 过 程 的 具体 实现 。Chromium 重 新 实现 了 整个 媒体 播放 流 
程 ， 并 针对 桌面 系统 和 移动 系统 采用 了 一 些 特殊 的 技术 和 解决 方法 。 


下 面 依次 来 看 HTML5 规 范 定 义 的 多 媒体 技术 ， 以 及 WebKit 和 
Chromium 为 HTML5 多 媒体 方面 的 技术 做 了 哪些 支持 工作 ， 也 就 是 上 
面 这 些 部 分 如 何 运作 的 。 


11.2 ”视频 


11.2.1 _ HTML5 视 频 


在 HTML5 规 范 定义 中 ，Web 开 发 者 可 以 使 用 “video” 元 素来 播放 视 
频 资 源 。 视 频 中 有 个 重要 的 问题 就 是 视频 编码 格式 ， 对 此 ， 目 前 标准 
中 包含 了 三 种 编码 格式 ， 它 们 分 别 是 Ogg、MPEG4 和 WebM。 其 中 Ogg 

是 由 Xiph.org 组 织 开 发 的 一 个 开放 标准 ， 不 需要 任何 授权 费用 ， 它 使 
用 Theora 作 为 视频 编码 格式 和 Vorbis 作 为 音频 编码 格式 。MPEG4 是 
MPEG 工 作 组 开发 的 需要 授权 费用 的 标准 ， 它 使 用 H.264 作 为 视频 编码 


格式 和 AAC 作 为 音频 编码 格式 。 而 WebM 是 由 Google 研 发 的 标准 ， 它 
也 是 完全 免费 自由 使 用 的 ， 使 用 VP8 作 为 视频 编码 格式 和 Vorbis 作 为 音 
频 编码 格式 。 表 11-1 说 明 4 个 主流 浏览 器 是 否 支 持 这 三 种 标准 的 情况 。 


表 11-1 主流 浏览 器 对 HTML5 中 三 个 视频 格式 的 支持 


Safari 


从 图 中 可 以 看 到 ， 除 了 Chrome 浏 览 器 支持 所 有 的 三 种 标准 之 外 ， 
其 他 浏览 器 可 能 只 是 支持 其 中 的 一 种 或 者 两 种 ， 这 对 网 页 的 开发 者 造 
成 了 困扰 。 到 底 如 何 编写 代码 才能 让 视频 在 这 些 浏览 器 上 都 能 工作 
Ne? 示例 代码 11-1 是 一 种 很 好 的 解决 方法 ， 前 提 是 前 端 开发 者 需要 了 
解 三 种 格式 的 视频 文件 。 


示例 代码 11-1 使 用 “video” 元 素 的 HTML5 代 码 片 段 


<video width="800" height="600" controls="controls"> 
<source src="video.webm" type="video/webm"> 
<source src="video.mp4" type="video/mp4"> 
<source src="video.ogg" type="video/ogg"> 
Your browser does not support the video tag. 


</video> 


浏览 器 会 根据 目 身 支持 情况 来 决定 播放 哪 一 个 ， 对 于 不 支持 
HTML5 视 频 规范 的 浏览 器 来 说 ， 它 显示 的 是 用 户 的 浏览 器 不 支持 它 。 


HTML5 提 供 了 一 些 属性 让 开发 者 来 使 用 JavaScript 代 码 检 查 和 操作 
视频 。HTML5 在 “video” 和 “audio” 元 素 之 间 抽 象 了 一 个 基 类 元 素 ,， 也 
就 是 “media” 元 素 ， 结 合 它 提供 的 能 力 ， 大 致 有 以 下 几 个 方面 的 
JavaScript 编 程 接口 。 


首先 是 资源 加 载 和 信息 方面 的 接口 ， 开 发 者 可 以 通过 特定 接口 检 
查 浏 览 器 支持 什么 格式 ， 如 Metadata 和 海报 (Poster) 等 。 其 次 是 缓冲 
(Buffering) 处 理 ， 包 括 缓冲 区 域 、 进 度 等 信息 。 然 后 是 播放 方面 的 
状态 ， 包 括 播放 、 暂 停 、 终 止 等 。 再 次 是 搜寻 (Seeking) 方面 的 信 
息 ， 包 括 设置 当前 时 间 、“Timeupdate” 事 件 ， 以 及 两 个 状态 “Seeking” 
和 “seeked”。 最 后 是 音量 方面 的 设置 ， 包 括 获 取 和 设置 音量 、 静 音 和 
音量 变换 等 事件 。 


11.2.2 WebKit 基础 设施 


WebKit 提 供 了 支持 多 媒体 规范 的 基础 框架 ， 如 音 视 频 元 素 、 
JavaScript 接 口 和 视频 播放 等 。 根 据 WebKit 的 一 般 设计 思想 ， 它 主要 是 
提供 标准 的 实现 框架 ， 而 具体 的 实现 由 各 个 移植 来 完成 ， 因 为 音 视频 
需要 平台 的 支持 。 图 11-1 是 WebKit 为 了 达到 这 一 目标 而 设计 的 各 个 类 
和 它们 之 间 的 关系 ， 也 包括 了 Chromium 移 植 的 几 个 基础 类 ， 关 系 比 较 
复杂 ， 下 面 按 功能 来 分 析 它 们 。 


MediaPlayerClient 一 岂 MediaPlayerPrivatelnterface 


+mediaPlayerTimeChanged() 
+mediaPlayerRe paint) I< ---------4 MediaPlayer <> 
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HTMLMediaElement 
+createMediaPlayer() 


RenderMedia 
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图 11-1 WebKit 支 持 视频 的 基础 类 和 关系 


1 
WebMediaPlayerClientimpl 其 它 移 植 
-m_webMedia Player 


HTMLVideoElement 
+posterlmageURL() 


首先 WebKit 是 支持 规范 定义 的 编程 接口 ， 图 11-1 中 左 侧 的 
HTMILMediaElement 和 HTMLVideo-Element 类 是 DOM 树 中 的 节点 类 ， 
分 别 对 应 于 W3C 标 准 中 的 定义 ， 包 含 众 多 DOM 接 口 ， 这 些 接口 可 以 被 
JavaScript 代 码 访 问 。 


其 次 是 MediaPlayer 和 MediaPlayerClient 两 个 类 ， 它 们 的 作用 非常 
明显 。 MediaPlayer 类 是 一 个 公共 标准 类 ， 被 HTMLMediaElement 类 使 
用 来 播放 音频 和 视频 ， 它 本 身 只 是 提供 抽象 接口 ， 具 体 实现 依赖 于 不 
同 的 WebKit 移 植 。 同 时 ， 一些 播放 器 中 的 状态 信息 需要 通知 到 
HTMLMediaElement 类 ， 这 里 使 用 MediaPlayerClient 类 来 定义 这 些 有 关 
状态 信息 的 接口 ，HTMLMediaElement 类 需要 继承 MediaPlayerClient 类 
并 接收 这 些 状 态 信 息 。 根 据 前 面 的 描述 ， 规 范 要 求 将 事件 派发 到 
JavaScript 代 码 中 ， 而 这 一 实现 就 在 HTMLMediaElement 类 完成 。 


然后 是 不 同 移植 对 MediaPlayer 类 的 实现 ， 其 中 包括 
MediaPlayerPrivateInterface 类 和 WebMediaPlayerClientImpl 类 。 前 者 是 
除了 Chromium 移 植 之 外 使 用 的 标准 接口 ， 也 是 一 个 抽象 接口 ， 由 不 同 
移植 来 实现 。 后 者 是 Chromium 移 植 的 实现 类 。 为 什么 会 这 样 ? 因为 


Chromium 4} WebKit tl] H Blink Z a 44 MediaPlayerPrivateInterface#8 
直接 移 除 了 ， 而 在 MediaPlayer 类 中 直接 调用 它 。 
WebMediaPlayerClientImpl 类 会 使 用 Chromium 移植 自己 定义 的 
WebMediaPlayer 接 口 类 来 作为 实际 的 播放 器 ， 而 真正 的 播放 器 则 是 在 
Chromium 项 目的 代码 中 来 实现 的 。 


最 后 是 同 泻 染 有 关 的 部 分 ， 这 里 面 就 是 之 前 介绍 的 RenderObject 
树 和 RenderLayer 树 , 中 的 RenderMedia 类 和 RenderVideo 类 是 
RenderObject 的 子 类 ， 用 于 表示 Media 节 点 和 Video 节 点 。 图 中 并 没有 关 
于 将 MediaPlayer 类 解码 和 泻 染 结合 起 来 这 一 部 分 的 说 明 ， 这 在 


Chromium 实 现 中 会 介绍 到 。 


图 11-1 中 关于 资源 获取 的 部 分 也 没有 绘制 出 来 ， 本 质 上 来 讲 ， 同 
其 他 资源 一 样 ， 这 里 仍然 使 用 ResourceDispatcher 类 来 请 求 资源 ， 但 是 
在 资源 的 缓冲 上 Chromium 有 特殊 之 处 ， 这 些 后 面 介 绍 。 


11-1 是 采用 硬件 加 速 机 制 的 视频 播放 所 使 用 的 类 ， 对 于 有 具体 过 
程 将 在 稍 后 介绍 。 当 然 ，WebKit 也 支持 使 用 软件 泻 染 方式 来 播放 视 
频 ， 实 际 比 硬件 加 速 方式 要 简单 一 些 。 根 据 之 前 章节 的 描述 ，WebKit 
采用 软件 泻 染 方式 不 需要 使 用 RenderLayer 类 、GraphicsLayer 类 等 ， 当 
需要 绘制 的 时 候 ， 由 RenderVideo 类 使 用 HTMLMediaElement 类 获取 
MediaPlayer 对 象 ， 调 用 它 的 paint 方 法 来 让 MediaPlayer 对 象 将 解码 后 的 
图 像 绘 制 在 当前 的 2D 图 形 上 下 文 接口 中 ， 有 具体 软件 泻 染 过 程 前 面 介 绍 
过 ， 比 较 容 易 理解 ， 不 再 缆 述 。 


11.2.3 ”Chromium 视频 机 制 


11.2.3.1 资源 获取 


因为 视频 资源 相对 其 他 资源 而 言 ， 一 般 比 较 大 ， 当 用 户 播 放 视 频 
的 时 候 ， 需 要 连续 性 播放 以 获得 较 好 的 体验 ， 但 是 网 络 可 能 并 不 是 一 
直 都 稳定 和 高 速 ， 所 以 资源 的 获取 对 用 户 体验 很 重要 ， 需 要 使 用 缓存 
机 制 或 者 其 他 机 制 来 预先 获取 视频 资源 。 


11-2 是 Chromium 中 的 缓存 资源 类 。BufferedDataSource 类 表示 资 
源 数 据 ， 它 是 一 个 简单 的 数据 表示 类 ， 内 部 包含 一 个 较 小 的 内 存 空间 
(32K) ， 实 际 的 缓冲 机 制 由 BufferedResourceLoader 类 完成 ， 前 面 章 
节 介 绍 了 资源 的 加 载 机 制 ，BufferedResourceLoader 类 也 是 使 用 该 机 制 | 
来 获取 数据 ， 只 是 它 会 使 用 一 定 的 内 存 空间 来 保存 这 些 视频 数据 。 在 
Chromium 的 设置 中 ， 最 小 的 缓存 空间 是 2M 内 存 ， 最 大 的 缓存 空间 是 
20M 内 存 ， 并 没有 使 用 磁盘 来 缓存 视频 资源 。 
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图 11-2 Chromium 的 视频 资源 缓存 类 


上 面 这些 都 是 浏览 器 为 视频 或 者 音频 所 做 的 工作 ， 看 起 来 一 切 都 
与 网 页 开发 者 无 关 ， 真 是 这 样 的 吗 ? 当然 不 是 ，W3C 组 织 提供 了 
Media Source 规 范 ， 开 发 者 可 以 使 用 Media Source 接 口 来 进行 音 视频 数 


据 流 的 缓冲 ， 这 样 可 以 按照 实际 需求 来 处 理 数据 。 还 是 来 看 一 个 
JavaScript 代 码 的 例子 ， 如 示例 代码 11-2 所 示 。 


示例 代码 11-2 一 个 使 用 MediaSource 接 口 的 代码 片段 


var mediaSource = new MediaSource(); 
var avideo = document.querySelector('avideo'); 
avideo.src = window.URL.createObjectURL(mediaSource) ; 
mediaSource.addEventListener('sourceopen', function(e) { 
var sourceBuffer = 
mediaSource.addSourceBuf fer ('video/webm; 
codecs="vorbis,vp8"'); 
sourceBuffer .append(aChunk) ; 


}, false); 


这 上段 代码 的 基本 思想 是 ，Web 开 发 者 使 用 “video” 元 素 的 “src” 属 性 
设置 自 定 义 的 数据 流 。 不 同 于 传统 文件 等 数据 流 方式 ， 示 例 代 码 11-2 
使 用 MediaSource 对 象 来 创建 一 个 URL 对 象 ， 然 后 往 对 象 中 不 断 地 加 入 
音 视频 数据 。 结 合 前 面 关 于 播放 控制 的 JavaScript 接 口 和 事件 ， 开 发 者 
可 以 将 数据 流 同 多 媒体 播放 器 播放 进度 很 好 地 结合 起 来 ， 从 而 达到 根 
据 实际 需求 来 实现 自 适应 的 数据 流 的 目的 。 


11.2.3.2 ”基础 设施 


前 面 介绍 了 WebKit 中 支持 规范 的 相关 类 等 基础 设施 ， 这 里 介绍 
Chromium 中 支持 硬件 加 速 机 制 的 视频 播放 所 需 的 基础 设施 。 图 11-3 是 


一 个 总 体 架 构图 ， 基于 Chromium 的 多 进 时 结构 。 
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WebKit 基础 设施 


11-3 ”Chromium 多 进程 结构 的 媒体 播放 器 设施 


根据 多 进程 架构 的 设计 原则 ，Chromium 的 媒体 播放 器 的 实现 应 该 
在 Renderer 进 程 ， 而 对 于 资源 的 获取 则 是 在 Browser 进 程 。 当 然 ， 前 面 
介绍 的 WebKit 基 础 设施 需要 每 个 移植 的 具体 实现 ， 所 以 ，WebKit 的 
Chromium 移 植 部 分 提供 了 桥接 接口 ， 并 且 实 现 则 是 在 Chromium 代 码 
中 来 完成 的 。Chromium 支 持 媒 体 播放 器 的 具体 实现 相当 复杂 ， 而 且 涉 
及 到 不 同 的 操作 系统 ， 目 前 Chromium 在 不 同 操作 系统 上 实现 的 媒体 播 
放 器 也 不 一 样 。 首 先 看 一 看 Chromium 基 础 类 ， 为 了 方便 理解 这 些 类 和 
11-1 中 类 之 间 的 关系， 图 11-4 标 注 了 一 些 WebKit 中 同 Chromium 和 直接 
相关 的 类 。 
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11-4 Chromium 支持 视频 的 基础 类 和 关系 


11-4 的 上 半 部 分 是 WebKit 和 WebKit 的 Chromium 移 植 中 的 相关 
类 ， 它 们 同样 出 现在 图 11-1 中 ， 而 下 半 部 分 是 Chromium 中 使 用 硬件 加 
速 机 制 来 实现 视频 播放 的 基础 设施 类 。 而 从 左右 分 开 来 看 ， 左 边 部 分 
是 播放 器 的 具体 实现 类 ， 右 边 部 分 则 是 支持 视频 在 合成 器 中 工作 的 相 
KE, 


首先 看 一 看 这 些 类 和 对 象 的 创建 过 程 。WebMediaPlayerClientImpl 
类 是 webKit 在 创建 HIMLMediaElement 对 象 之 后 创建 MediaPlayer 对 象 
的 时 候 ， 由 MediaPlayer 对 象 来 创建 的 。 当 视频 资产 开始 加 载 时 ， 
WebKit 创 建 一 个 webMediaPlayer 对 象 ， 当 然 就 是 Chromium 中 的 具体 实 
现 类 WebMediaPlayerImpl 对 象 ， 同 时 WebMediaPlayerClientImpl 类 也 实 
现 了 WebMediaPlayerClient 类 ， 所 以 WebMediaPlayerImpl 在 播放 视频 的 
过 程 中 需要 向 该 WebMediaPlayerClient 类 更 新 各 种 状态 ， 这 些 状 态 信息 
最 终 会 传递 到 HTMLMediaElement 类 中 ， 最 终 可 能 成 为 JavaScript 事 


件 ， 如 前 面 介 绍 播放 进度 事件 等 。 之 后 ，WebMediaPlayerImpl 对 象 会 
创建 一 个 webLayerImpl 对 象 ， 还 会 同时 创建 VideoLayer 对 象 ， 根 据 合 
成 器 的 设计 ，Chromium 还 有 一 个 LayerImpl 树 ， 在 同步 的 时 候 ， 
VideoLayer 对 象 对 应 的 VideoLayerImpl 对 象 会 被 创建 。 之 后 Chromium 
需要 创建 VideoFrameProviderClientImpl 对 象 ， 该 对 象 将 合成 器 的 Video 
层 同 视频 播放 器 联系 起 来 并 将 合成 器 绘制 一 帧 的 请 求 转 给 提供 视频 内 
容 的 VideoFrameProvider 类 ， 这 实际 上 是 调用 Chromium 的 媒体 播放 器 
WebMediaPlayerImpl， 因 为 它 就 是 一 个 VideoFrameProvider 类 的 实现 子 
类 

然后 是 Chromium 如 何 使 用 这 些 类 来 生成 和 显示 每 一 帧 的 。 当 合成 
器 调用 每 一 层 来 绘制 下 一 帧 的 时 候 ， 
VideoFrameProviderClientImpl::AcquireLockAndCurrentFrame() K 2X 会 
被 调用 ， 然 后 该 函数 调用 WebMediaPlayerImpl 类 的 GetCurrentFrame 团 
数 返 回 当 前 一 帧 的 数据 。VideoLayerImpl 类 根据 需要 会 将 这 一 帧 数据 
上 传 (或 者 是 拷贝 等 ) 到 GPU 的 纹理 对 象 中 。 当 绘制 完 这 一 帧 之 后 ， 
VideoLayerImpl 调 用 VideoFrame-ProviderClientImpl::PutCurrentFrame 来 
通知 播放 器 这 一 帧 已 绘制 完成 ， 并 释放 掉 相 应 的 资源 。 同 时 ， 媒 体 播 
放 器 也 可 以 通知 合成 器 有 一 些 新 帧 生成 ， 需 要 绘制 出 来 ， 它 会 首先 调 
AHE BY VideoFrameProvider::DidReceiveFrame()EI 2X, 12 A ŽA R 
检查 当前 有 没有 一 个 VideoLayerImpl 对 象 ， 如 果 有 对 象 存在 ， 需 要 设 
置 它 的 SetNeedsRedraw 标 记 位 ， 这 样 ， 合 成 器 就 知道 需要 重新 生成 新 
的 一 帧 。 


最 后 是 上 述 有 天 视频 播放 对 象 的 销毁 过 程 。 有 多 种 情况 使 
Chromium 需 要 销毁 媒体 播放 器 和 相关 的 资源 ， 如 “video” 元 素 被 移 除 或 


者 设置 为 隐藏 等 ， 这 样 视 频 元 素 对 应 的 各 种 层 对 象 ， 以 及 WebKit 和 
Chromium 中 的 这 些 设 施 就 会 被 销毁 。 


WebMediaPlayerImpl 类 是 多 媒体 播放 器 的 具体 实现 类 。 在 
Chromium 项 目 中 ， 随 着 工程 师 增 加 了 对 Android 系 统 (这 里 不 涉及 iOS 
系统 话题 ， 那 是 另外 的 故事 ) 的 支持 ，Chromium 既 能 支持 桌面 系统 也 
能 支持 移动 系统 ， 而 这 两 者 对 视频 和 音频 的 支持 很 不 一 样 ， 所 以 在 不 
同系 统 上 WebMediaPlayerImpl 是 如 何 实现 和 工作 的 ， 也 很 不 一 样 。 下 
面 ， 依 次 了 解 桌面 系统 和 Android 系 统 中 支持 视频 播放 的 过 程 。 


11.23.3 ”桌面 系统 


在 桌面 系统 中 ，Chromium 使 用 了 一 套 多 媒体 播放 框 染 ， 而 不 是 直 
接 使 用 系统 或 者 第 三 方 库 的 完整 解决 方案 。 图 11-5 是 Chromium 在 桌面 
系统 中 采用 的 多 媒体 播放 引 敬 的 工作 模块 和 过 程 ， 来 源 于 网 页 
http://www.chromium.org/developers/design-documents/video ， 这 里 稍微 
做 了 些 修改 ， 这 一 框架 称 为 多 媒体 管线 化 引擎 ， 图 中 主要 的 模块 是 多 
路 分 配器 (Demuxer) 、 音 视频 解码 器 、 音 视频 泻 染 器 。 这 些 部 分 主 
要 被 WebMediaPlayerImpl 类 调用 。 


视频 资源 文件 


视频 解码 器 多 路 分 配器 


视频 泻 染 器 


BufferedDataSource 


PATE MAN ait 


图 11-5 ”Chromium 的 多 媒体 管线 化 引擎 


在 处 理 音 视频 的 管线 化 过 程 中 ， 需 要 解码 器 和 泻 染 器 来 分 别处 理 
视频 和 音频 数据 。 它 们 均 采 用 一 种 叫做 “ 拉 ” 而 不 是 “ 推 ? 的 方式 进行 ， 
也 就 是 说 由 视频 或 者 音频 泻 染 器 根据 声卡 或 者 时 钟 控制 器 ， 按 需要 来 
请 求解 码 器 解码 数据 ， 然 后 解码 器 和 泻 染 器 又 向 前 请 求 * 拉 ”数据 ， 直 
到 请 求 从 视频 资源 文件 读 入 数据 。 根 据 之 前 的 多 进程 架构 和 Chromium 
的 安全 机 制 ， 整 个 管线 化 引擎 虽然 在 Renderer 进 程 中 ， 但 是 由 于 
Renderer 进 程 不 能 访问 声卡 ， 所 以 图 中 泻 染 器 需要 通过 IPC 将 数据 或 者 
消息 同 Browser 进 程 通信 ， 由 Browser 进 程 来 访问 声卡 。 


虽然 FFmpeg 多 媒体 库 拥 有 上 述 管 线 化 过 程 的 能 力 ， 但 是 其 实 
Chromium 并 不 是 将 其 作为 一 个 黑 盒 来 使 用 ， 而 是 分 别 使 用 FFmpeg 的 
不 同 模块 来 实现 自己 的 管线 化 引擎 ， 目 的 是 由 自身 来 控制 这 一 整个 过 


程 。 


Chromium 使 用 并 行 FFmpeg 解 码 技术 ， 也 就 是 说 FFmpeg 能 够 在 帧 
这 个 层面 上 并 行 解 码 ， 当 然 这 不 是 针对 所 有 格式 的 视频 文件 ， 目 前 主 
要 针对 H.264 这 个 格式 的 视频 。 根 据 Chromium 官 方 的 实验 结果 ， 在 多 
核 机 器 上 ， 人 性 能 能 够 得 到 较 大 幅度 的 提升 。 


FFmpeg 多 媒体 库 只 是 在 桌面 系统 上 被 使 用 ， 而 在 Android 上 则 是 
另外 一 种 情况 了 。 


11.2.3.4 Android 系统 


在 Android 系 统 上 ， 人 情况 变 得 很 不 一 样 ， 因 为 Chromium 使 用 的 是 
Android 系 统 所 提供 的 android.media.MediaPlayer 类 ， 也 就 是 使 用 系统 提 


供 的 音 视频 的 泻 染 框 架 。 在 减少 了 管线 化 引擎 带 来 复杂 性 的 同时 ， 
Chromium 却 额外 引入 了 一 些 复杂 性 ， 接 下 来 一 起 来 看 看 。 


Android AY Chromium?) RA Y FFmpeg, BHP RAAB AY 
多 媒体 功能 ， 因 而 ，Android 系 统 支持 什么 样 的 视频 和 音频 格式 ， 
Chromium 就 只 能 支持 什么 样 的 相应 格式 。 同 时 ， 由 于 Android 多 媒体 
框架 的 优点 ， 使 得 视频 元 素 仍然 能 够 同 HTML5 中 的 其 他 技术 一 起 工 
作 ， 这 点 很 重要 。 


1。Android 媒 体 播放 框架 


Android 中 使 用 一 个 名 为 “MediaService” 的 服务 进程 来 为 应 用 程序 
提供 音频 和 视频 的 播放 功能 ， 图 11-6 所 示 的 是 一 个 Android 的 多 媒体 框 
架 概念 图 。 对 于 每 一 个 使 用 多 媒体 播放 功能 的 应 用 程序 来 说 ， 
“MediaService” 服 务 是 透明 的 。 为 Android 系统 提供 了 使 用 
“MediaService” 的 封装 接口 ， 这 些 接口 隐藏 了“*MediaService” 服 务 内 部 
的 细节 ， 应 用 程序 只 是 使 用 了 简单 的 播放 接口 。 


Media Player Media Player 


Media Service 


图 11-6 ”Android 多 媒体 框架 


MediaService 能 够 为 多 个 播放 器 提供 服务 EE eae 它 
主要 设置 两 个 参数 ， 其 一 是 输入 的 URL， 其 二 是 输出 结果 的 绘制 目 
标 。 图 11-7 描 述 了 Android 的 播放 器 类 和 相关 类 ， 以 及 它们 之 间 的 关 


android.net.Uri android.webkit.MediaPlayer SurfaceTexture 
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图 11-7 Android 的 MediaPlayer 相 关 类 


所 以 ， 当 应 用 程序 需要 使 用 播放 器 的 时 候 ，Chromium 可 以 创建 
MediaPlayer 类 的 对 象 ， 调 用 setDataSource 图 数 来 设置 待 播放 视频 文 
件 ， 并 调用 setSurface 来 设置 视频 结果 绘制 的 目标 SurfaceTexture 对 
象 ， 这 是 一 个 CL 的 纹理 对 象 。 因 为 实际 的 解码 和 绘制 是 在 
MediaService 进 程 中 完成 的 ， 这 需要 该 纹理 对 象 能 够 被 多 个 不 同 的 GL 
上 下 文 对 象 所 访问 ， 支 持 多 个 GL 上 下 文 对 象 访问 的 GL 经 理 对 象 的 类 
型 就 是 : GL_TEXTURE_EXTERNAL_OESo 


根据 上 面 的 描述 ， 读 者 可 以 看 到 Chromium 使 用 Android 系 统 提供 
的 音 视 频 播放 功能 。 这 表示 Chromium 使 用 Android 系 统 的 音 视频 解码 
器 ， 所 以 Chromium 是 依赖 于 Android 系 统 支持 的 音 视 频 编 码 格 式 ， 而 
不 像 Chromium 的 桌面 版 独立 于 操作 系统 支持 的 音 视 频 编码 格式 。 


2。Chromium 的 视频 解决 方案 


在 Android 系 统 上 ， 因 为 Chromium 使 用 系统 的 多 媒体 框架 ， 所 以 
它 没 有 自己 的 管线 化 引擎 ， 主 要 的 工作 还 是 将 Chromium 的 架构 同 
Android 多 媒体 框架 结合 起 来 以 完成 对 网 页 中 视频 和 音频 的 播放 。 


11-8 是 Chromium 在 Android 系 统 上 支持 音频 和 视频 播放 的 播放 器 
主要 类 ， 因 为 Chromium 的 多 进程 和 架构， 所 以 这 里 面包 括 两 大 部 分 ， 痢 
先是 右 侧 的 Renderer 进 程 中 的 相关 类 。 根 据 前 面 Chromium 的 桌面 版 上 
支持 多 媒体 的 相关 类 ， 笔 者 可 以 看 到 WebKit::WebMediaPlayer 类 和 
WebMediaPlayerClient 类 来 自 于 WebKit 的 Chromium 移 植 ， 这 两 个 类 在 
所 有 平台 上 的 定义 都 是 一 样 的 。 下 面 介绍 Chromium 的 Android 版 支持 
多 媒体 播放 的 不 同 之 处 。 
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图 11-8 ” Android 系统 上 的 播放 器 基础 设施 


上 图 中 右 侧 的 Renderer 进 程 ， 从 上 向 下 看 首先 是 
WebMediaPlayerAndroid 类 ， 它 同 之 前 的 WebMediaPlayerImpl 类 相似 ， 
表示 的 是 Android 系 统 上 网 页 中 的 播放 器 ， 同 video 元 素 是 一 一 对 应 
的 。 与 桌面 系统 上 不 一 样 的 是 ，Android 系统 使 用 Renderer- 
MediaPlayerManager 类 来 管理 所 有 的 WebMediaPlayerAndroid 对 象 ， 这 
是 因为 一 个 网 页 中 可 能 包含 多 个 播放 器 实例 。 而 
WebMediaPlayerProxyAndroid 则 是 同 Browser 进 程 来 通信 的 ， 因 为 真正 


的 Android 播 放 器 是 在 Browser 进 程 中 的 ， 这 里 主要 请 求 Browser 进 程 创 
建 实际 的 Android 的 MediaPlayer 类 并 设置 播放 文件 的 信息 。 


图 11-8 中 左 侧 则 是 实际 的 播放 器 ， 在 JNI (Java Native Interface) 
之 上 的 是 Java 类 ， 如 同 前 面 介绍 的 ， 该 播放 器 就 是 使 用 Android 系 统 中 
的 android.media.MediaPlayer 及 其 相关 类 来 工作 的 。 从 下 向 上 看 ， 首 先 
是 BrowserMediaPlayerManager 类 ， 该 类 不 仅 负 责 同 Renderer 进 程 的 播 
放 器 类 进行 通信 ， 而 且 自 身 又 是 一 个 播放 器 的 管理 类 ， 它 包含 当前 全 
部 网 页 中 的 所 有 播放 器 对 象 ， 因 为 可 能 会 有 多 个 Renderer 进 程 ， 所 以 
只 能 通过 播放 器 的 唯一 标记 来 区 分 这 些 播 放 器 。 
BrowserMediaPlayerManager 类 管理 称 为 MediaPlayerAndroid 类 的 多 个 对 
象 ， 而 MediaPlayerAndroid 的 子 类 MediaPlayerBridge 则 是 具体 实现 类 ， 
该 子 类 能 够 与 Java 层 中 相同 名 字 类 通过 JNI 调 用 来 控制 Android 系 统 的 
播放 器 类 ， 图 中 已 经 表明 这 一 关系 。 请 读者 记 住 ， 这 里 的 所 有 类 都 是 
工作 在 Browser 进 程 的 主线 程 。 


上 面 的 过 程 基本 上 融 是 如 何在 网 页 中 创建 一 个 播放 器 的 过 程 ， 从 
右 向 左 ， 直 到 图 11-8 中 左 侧 上 面 的 android.media.MediaPlayer 对 象 被 创 
建 完成 ， 与 此 同时 Chromium 获 取 网 页 中 设置 的 视频 文件 的 URL 字 符 
串 ， 然 后 传递 并 设置 该 URL 字 符 串 到 Android 的 媒体 播放 器 中 。 


输入 是 有 了 ， 那 么 输出 呢 ? 播放 器 将 解码 之 后 的 结果 输出 到 什么 
目标 上 呢 ? 在 Android 上 ， 如 前 面 所 述 ，Chrome 使 用 SurfaceTexture 对 
象 作 为 输出 目标 。 创 建 和 使 用 SurfaceTexture 对 象 的 过 程 是 如 何 进 行 的 
呢 ? 当 Chromium 调 用 WebMediaPlayerAndroid 类 的 play 国 数 时 ， 该 函数 
发 起 请 求 从 Renderer 进 程 到 Browser 进 程 来 创建 输出 目标 ， 也 就 是 
SurfaceTexture 对 象 ， 图 11-9 描 述 了 这 一 过 程 中 使 用 到 的 主要 类 和 它们 
之 间 的 关系 。 
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图 11-9 ”媒体 播放 器 的 视频 结果 基础 设施 


下 面 依 次 了 解 右 侧 的 Renderer 进 程 部 分 。 从 上 往 下 看 ， 最 上 面 的 
是 StreamTexture-FactoryImpl 类 ， 顾 名 思 义 ， 该 类 就 是 创建 目标 结果 存 
储 空间 的 类 ， 它 被 WebMedia-PlayerAndroid 类 使 用 来 创建 所 需要 的 结 
果 存 储 对 象 StreamTexture。 因 为 实际 的 对 象 是 在 Browser 进 程 中 被 创建 
的 ， 所 以 Renderer te 中 的 U 类 就 是 一 个 代理 类 ， 最 
后 的 请 求 通过 GPUChannelHost 类 来 传递 给 Browser 进 程 。 


在 Browser 进 程 中 ， 负 责 处 理 上 述 请 求 的 是 GPU 线程 ， 该 线程 由 
StreamTextureManager-Android 类 来 处 理 所 有 创建 StreamTexture 对 象 的 
请 求 。 StreamTexture 对 象 的 直接 使 用 者 是 GPU 线程 。Renderer 进 程 需 
要 区 分 和 标识 这 些 StreamTexture 对 象 ， 具 体 的 方法 是 使 用 整形 标记 符 
来 表示 Browser 进 程 中 的 各 个 StreamTexture X} Ro StreamTexture 和 


StreamTextureManager 是 基础 抽象 类 ， 在 Android A R E, 
StreamTextureAndroid 和 StreamTextureManagerAndroid 是 实际 的 实现 
类 。 Stream-TextureAndroid 表 示 的 是 C++ 端的 桥接 类 ， 它 包含 一 个 
SurfaceTexture WT R , Z H R AB E Java i Cl E — T 
android.graphics.SurfaceTexture 对 R , Chromium 设置 该 对 象 到 
MediaPlayer 对 象 作 为 播放 器 的 输出 目标 。 


当 视 频 播 放 器 将 解码 后 的 结果 写 入 到 SurfaceTexture 中 后 ， 播 放 器 
需要 告诉 Chromium 浏 览 器 这 一 信息 ， 因 为 Chromium 浏 览 器 需要 执行 
合成 操作 ， 而 合成 器 在 Renderer 进 程 中 ， 同 之 前 创建 SurfaceTexture 对 
象 的 调用 过 程 正 好 相反 ， 这 里 需要 使 用 回调 机 制 ， 这 就 是 Java 层 
SurfaceTextureListener 类 的 作用 ， 该 回调 类 注册 Java 层 的 回调 对 象 到 创 
建 好 的 SurfaceTexture 对 象 ， 当 该 对 象 被 写 入 新 帧 的 时 候 ，Chromium 首 
先是 从 Browser 进 程 中 的 Java 层 将 这 一 回调 动作 通过 JNI 到 C++ 层 的 
SurfaceTextureListener 类 的 FrameAvailable 图 数 ， 该 辆 数 经 过 
StreamTextureAndroid 和 StreamTextureManagerAndroid 类 最 后 发 送 到 
Renderer 进 程 ，Renderer 进 程 的 调用 过 程 如 图 11-10 所 示 。 


GpuChannelHost StreamTextureHost . VideoLayerlmpl LayerTreeHostilmpl 
Vi i vi 
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图 11-10 ”视频 帧 的 合成 过 程 


上 面 的 过 程 同 桌面 系统 是 一 致 的 ， 在 这 之 后 的 合成 过 程 相 信 读 者 
都 知道 了 吧 ? 没 错 ， 读 者 可 以 回忆 一 下 第 8 章 中 对 于 它们 的 详细 介绍 ， 


视频 只 是 众多 层 中 的 一 层 ， 合 成 过 程 仍然 是 之 前 所 描述 的 那样 。 


网 页 中 的 视频 播放 有 两 种 模式 ， 其 一 是 能 入 式 模 式 ， 其 二 是 全 屏 
模式 ， 这 两 种 模式 在 对 解码 后 结果 的 处 理 上 是 不 一 样 的 。 图 11-11 描 述 
了 全 屏 模 式 创建 视频 结果 的 绘制 目标 的 相关 类 和 过 程 。 


android.media.MediaPlayer Java:ContentVideoView 
T 


Java:MediaPlayerBridge 


+setSurface() 


1 JNI 
1 


media::MediaPlayerBridge 
+SetVideoSurface() 


BrowserMediaPlayerManager i 
+SetVideoSurface() ~ 


图 11-11 全 屏 模式 下 的 输出 目标 创建 过 程 


当 某 个 播放 器 进入 全 屏 模 式 的 时 候 ，Chromium 使 用 
ContentVideoView 类 来 管理 ， 该 类 会 创建 一 个 SurfaceView 对 象 并 将 对 
象 传递 给 C++ 端的 ContentVideoView 类 ， 因 为 总 是 只 有 一 个 播放 器 是 全 
屏 模式 ， 而 且 BrowserMediaPlayerManager 管 理 所 有 的 MediaPlayer 对 
象 ， 所 以 该 管理 类 能 够 知道 哪个 对 象 是 全 屏 播放 模式 ， 并 将 该 
SurfaceView 对 象 设 置 到 相应 的 MediaPlayer 对 象 中 去 。 


关于 多 媒体 播放 器 ， 还 有 一 点 非常 有 趣 ， 那 就 是 播放 器 的 控制 器 
(Controls) ， 它 是 用 来 控制 播放 的 开始 、 停 止 、 快 进 、 声 音 控制 等 操 
作 的 ， 网 页 的 开发 者 在 “video” 元 素 中 加 入 属性 “controls” 就 可 以 调用 默 
认 的 控制 器 ， 浏 览 器 就 可 以 为 网 页 绘制 出 一 个 默认 的 控制 器 ， 当 然 开 
发 者 也 能 够 定义 自身 的 控制 器 ， 因 为 浏览 器 已 经 提供 了 相应 的 
JavaScript 接 口 。 当 使 用 默认 控制 器 的 时 候 ， 浏 览 右 是 如 何 绘制 控制 器 


的 呢 ? 方法 就 是 使 用 第 4 章 的 影子 DOM 技 术 ， 此 处 介绍 的 DOM 树 结构 
会 出 现在 网 页 的 DOM 树 中 ， 这 样 就 可 以 使 用 HTML5 的 CSS 技 术 来 绘 
制 所 需 的 控制 器 ， 非 常 方便 而 且 易 于 维护 。 


11.2.4 ”字幕 


对 于 视频 技术 ， 还 有 一 个 重要 的 组 成 部 分 ， 那 就 是 字幕 的 支持 。 
庆幸 的 是 ，W3C 组 织 已 经 开始 定义 支持 字幕 的 "track” 元 素 ， 而 字幕 文 
件 采用 的 格式 是 WebVTT 格 式 ， 该 格式 看 起 来 比较 直观 ， 简 单 的 例子 
就 是 时 间 惟 区 间 加 上 相应 的 字幕 文字 ， 有 兴趣 的 读者 可 以 去 W3C 官 网 
上 查看 一 下 。 示 例 代 码 11-3 是 一 个 使 用 字幕 的 视频 元 素 ， 实 际 上 ， 
为 语言 的 问题 ， 每 个 “video” 元 素 可 以 有 多 个 “track” 元 素 ， 每 个 “track” 
元 素 可 以 用 来 表示 一 种 语言 。 


示例 代码 11-3 ”使 用 字幕 的 视频 元 素 代码 


<video controls="controls"> 
<source src="video.mp4" type="video/mp4"> 
<track src="captions.vtt" kind="sSubtitles" srclang="en" 
label="English"></track> 


</video> 


字幕 文件 的 解释 工作 不 依赖 各 个 WebKit 移 植 ，WebCore 模 块 完整 
地 支持 了 “track” 元 素 解 析 、 字 幕 文件 解析 等 功能 。 图 11-12 是 WebKit 支 
持 字幕 功能 的 主要 类 ， 笔 者 逐次 来 分 析 它 们 。 


HTMLTrackElement 
LoadableTextTrack 


+scheduleLoad() 


InbandTextTrack 


V 
InbandTextTrackPrivateClient 


InbandTextTrackPrivate 

kind) EE +addWebV TT Cue() 
A es 

InbandTextTrackPrivatelmpl WebMediaPlayerClientimp! 

wo ee +addTextTrack() 
create 

Vi 

WeblnbandTextTrackClient WeblnbandTextTrack 


ev [a 


图 11-12 WebKit 中 支持 字幕 的 基础 设施 


“track” 本 身 是 一 个 HTML 元 素 ， 所 以 它 在 DOM 中 有 相应 的 节点 元 
素 ， 这 就 是 图 中 的 HTMLTrackElement 类 。 根 据 规范 ，“track” 元 素 有 一 
个 重要 的 属性 ， 那 就 是 “src"， 该 属性 指定 了 字幕 文件 的 URL。 WebKit 
使 用 LoadableTextTrack 类 来 负责 解析 字幕 文件 并 使 用 TextTrack 类 来 存 
储 解析 后 的 结果 。 目 前 WebKit 只 支持 WebVTIT 格 式 的 字幕 ， 使 用 
WebVTTParser 解 析 器 来 解释 它们 ， 关 系 不 是 很 复杂 。 


下 面 一 部 分 是 提供 接口 ， 这 里 的 接口 依然 是 WebKit 的 Chromium 移 
植 所 定义 的 接口 ， 不 同 的 移植 所 定义 的 接口 可 能 不 一 样 。 接 口 依然 是 
两 个 类 ，WebInbandTextTrack 和 WebInbandText-TrackClient 类 ， 且 是 公 
开 接 口 ，WebInbandTextTrack 类 由 Chromium 实 现 ， 由 WebKit 调 用 。 而 
WebInbandTextTrackClient 类 则 由 WebKit 实现 ， 实 现 类 就 是 
InbandTextTrackPrivateImpl ， © X Hl WebInbandTextTrackClient 的 接 
口 ， 然 后 调用 解析 后 的 字幕 并 返回 给 Chromium。 这 一 过 程 由 
InbandTextTrackPrivateClient 类 和 InbandTextTrack 类 完成 ， 这 里 类 的 关 
系 有 些 复杂 ，WebKit/Blink 今 后 最 好 能 简化 一 下 。 


上 面 这 些 动作 需要 将 一 些 消 息 传递 给 JavaScript 代 码 ， 因 为 规范 提 
供 了 JavaScript 接 口 ， 开 发 者 可 以 让 JavaScript 代 码 控 制 或 者 获取 字幕 信 
息 ， 这 些 不 再 介绍 。 下 面 是 Chromium 中 的 支持 框架 ， 图 11-13 摘 述 了 
Chromium 是 如 何 将 WebKit 中 的 字幕 信息 桥接 到 多 媒体 管线 化 引擎 中 去 
的 。 


WeblnbandTextTrackClient < WeblnbandTextTrack 


Be cs. jaa eas eae Wa aT | : 
+addWebVTT() +setClient() WebKit 
R 
、 
pS 
media::TextTrack TextTrackimp| WebInbandTextTrackimpl ; 
和 Chromium 
+client() 
Í A 
1 create 1 create 
1 1 


WebMediaPlayerlmpl 
+OnTextTrack() 


图 11-13 ”Chromium 中 支持 字幕 的 基础 设施 


在 Chromium 中 ，WebMediaPlayerImpl 类 创建 继承 类 的 对 象 ， 并 设 
置 WebInband-TextTrackClient 对 象 到 该 对 象 。 根 据 之 前 的 介绍 可 知 ， 该 
对 象 实际 上 是 InTextTrack ， 它 包含 解析 后 的 字幕 内 容 ， 这 样 
TextTrackImpl 就 可 以 获得 字幕 的 内 容 ， 而 TextTrack 对 象 会 被 多 媒体 的 
管线 化 引擎 所 调用 并 泻 染 在 视频 的 结果 中 。 


11.2.5 ”视频 扩展 
在 视频 领域 ， 还 有 很 多 方面 在 不 停 地 向 前 发 展 ， 包 括 Media 
Source 接 口 、 音 视频 资源 保护 等 ， 这 些 称 为 Media 的 扩展 。 


接 下 来 讨论 的 是 对 音 视频 资源 的 保护 ， 也 就 是 版 权 保 护 的 问题 ， 
通俗 一 点 就 是 如 何 避 免 被 非法 拷贝 和 使 用 。 在 HTML5 中 ， 目 前 没有 成 


熟 方案 的 原因 有 两 种 。 一 种 说 法 是 编码 格式 应 该 自行 解决 该 问题 ， 而 
不 是 需要 HITML5 额 外 提供 解决 方案 。 但 是 ， 就 目前 而 言 ， 主 流 的 三 种 
方式 都 没有 解决 加 密 等 保护 问题 ， 所 以 事实 上 这 的 确 是 一 个 问题 。 另 
外 一 种 就 是 目前 标准 组 织 没 有 继续 坚持 之 前 的 想法 ， 开 始 了 其 他 方面 
的 研究 和 工作 ， 这 就 是 “Encrypted Media Extensions”, CH AIRE RS 
阶段 ， 主 要 用 来 保护 播放 内 容 的 安全 ， 具 体 请 查看 W3C 官 方 网 站 上 的 
文档 。 


而 关于 Media Source 扩 展 ， 其 主要 目的 是 提供 接口 来 让 JavaScript 
代码 能 够 生成 多 媒体 流 ， 典 型 的 应 用 场景 是 自 适 应 流 ， 其 主要 接口 是 
MediaSource 和 SourceBuffer. 每 个 MediaSource 对象 可 以 包含 多 个 
SourceBuffer 对 象 ， 每 个 SourceBuffer 包 含 一 个 数据 流 ， 如 视频 流 或 音 
频 流 ，Chromium 已 经 开始 提供 一 些 支 持 。 


11.3 ”音频 


11.3.1 ”音频 元 素 


说 完 视频 之 后 ， 接 下 来 就 是 HTML5 中 对 音频 的 支持 情况 。 音 频 支 
持 不 仅 指 对 声音 的 播放 ， 还 包括 对 音频 的 编辑 和 合成 ， 以 及 对 乐器 数 
FO (MIDI) 等 的 支持 ， 下 面 逐 次 介绍 并 分 析 它 们 。 


11.3.1.1 HTML5 Audio 元 素 


说 到 音频 ， 最 简单 当然 也 是 最 直接 想到 的 就 是 音频 播放 ， 在 
HTML5 中 使 用 “audio” 元 素来 表示 。 同 视频 类 似 ，HTML5 标 准 中 也 定 
义 了 三 种 格式 ， 它 们 是 Ogg、MP3 和 Wav。 到 目前 为 止 ， 笔 者 所 了 解 的 
浏览 器 对 音频 格式 的 支持 如 表 11-2 所 示 。 


表 11-2 ”主流 浏览 器 对 HTML5 中 三 个 音频 格式 的 支持 


与 视频 格式 类 似 ， 考 虑 到 浏览 器 对 HTML5 的 “audio” 支 持 程 度 不 
同 ， 格 式 也 不 尽 相 同 ， 所 以 Web 开 发 者 同样 可 以 提供 三 种 格式 的 文 
件 ， 采 用 如 实例 代码 11-4 所 示 的 代码 以 获得 最 好 的 用 户 体验 效果 。 


v 


示例 代码 11-4 ”使 用 “audio” 元 素 的 HTMIL5 代 码 片 段 


<audio controls="controls"> 
<source src="audio.mp3" type="audio/mpeg"> 
<source src=" audio.wav" type="audio/wav"> 
<source src=" audio.ogg" type="audio/ogg"> 
Your browser does not support the audio tag. 


</audio> 


因为 视频 内 容 通 单 包 含 音频 数据 ， 所 以 不 仅仅 是 "audio" 元 素 才 会 
使 用 音频 播放 ， 但 是 二 者 在 工作 原理 上 是 类 似 的 。 同 时 ， 音 频 的 字幕 
同 视频 是 一 样 的 ，“track” 元 素 也 可 以 用 在 “audio” 元 素 的 字幕 中 ， 用 来 
显示 字幕 。 


11.3.1.2 ”基础 设施 


音频 的 支持 方面 还 是 从 输入 和 输出 两 个 方面 着 手 。 对 于 输入 ， 同 
视频 类 似 ，WebKit 使 用 资源 加 载 器 先 加 载 音 频 文 件 ， 之 后 是 建立 音频 
元 素 、 管 线 化 引擎 相关 的 类 ， 如 MediaPlayer 类 、HTMLAudioElement 
和 WebMediaPlayer 类 等 。 同 视频 不 一 样 的 是 ， 视 频 的 输出 是 GPU 中 的 
纹理 对 象 ， 而 音频 需要 输出 到 声卡 ， 所 以 需要 打开 声卡 设备 。 因 为 
Donan sale ee 所 以 只 能 靠 Browser 进 程 来 打开 和 关闭 声 
卡 设备 ， 图 11-14 描 述 了 多 进程 中 如 何 将 音频 从 Renderer 进 程 传输 到 
Browser 进 程 ， 以 及 WebKit 和 Chromium 中 相应 的 基础 设施 。 
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图 11-14 WebKit 和 Chromium 支 持 Audio 的 基础 设施 


首先 是 Renderer 进 程 这 一 部 分 ， 也 就 是 右 侧 部 分 ， 从 上 往 下 依次 
介绍 如 下 。 


e WebKit:: WebAudioSourceProvider 和 
WebKit::WebAudioSourceProviderClient : 最 上 面 两 个 类 是 
WebKit 的 Chromium 移 植 接 口 类 ， 根 据 名 字 读 者 已 经 猜测 出 来 了 ， 


前 者 提供 音频 原 数据 ， 也 就 是 音频 文件 中 的 数据 ， 这 里 采用 “ 拉 ” 
的 方式 ， 也 就 是 在 ResourceLoader 加 载 数 据 之 后 ， 当 且 仅 当 泻 染 
引擎 需要 新 的 数据 的 时 候 ， 主 动 从 加 载 后 的 数据 中 拉 出 数据 来 进 
行 解码 。 “providelnput” K 2X A Chromium Sci), FA WebKit5| Si 
用 。 WebKit::WebAudioSourceProviderClient 提供 Y “setFormat” cA 
数 ， 用 于 让 Chromium 的 媒体 播放 器 设置 频道 数量 、 采 样 率 等 信 
息 o WebAudioSourceProviderImpl 是 WebKit::Web- 
AudioSourceProvider 的 实现 类 。 

e AudioRendererImp! : 该 类 就 是 音频 泻 染 器 的 实现 ， 并 使 用 类 
AudioRenderSink 将 音频 解码 的 结果 输出 到 音频 设备 。 

e AudioRendererSink : 一 个 抽象 类 ， 用 于 表示 一 个 音频 终端 点 ， 

能 够 接收 解码 后 的 音频 信息 ， 典 型 的 一 个 例子 就 是 音频 设备 。 

e AudioRendererMixer : 泻 染 器 中 的 调 音 类 。 

e AudioOutputDevice : 音频 的 输出 设备 ， 当 然 只 是 一 个 桥接 层 ， 
为 实际 的 调用 请 求 是 通过 下 面 两 个 类 传送 给 Browser 进 程 的 。 

。AudioOutputIPCImpI 和 AudioMessageFiIter : 前 者 将 数据 和 指 
令 通 过 IPC 发 送 给 Browser 进 程 ， 而 后 者 当然 就 是 执行 消息 发 送 机 
制 的 类 


然后 是 Browser 进 程 这 一 部 分 ， 也 就 是 左 侧 部 分 ， 自 下 而 上 依次 介 


绍 如 下 。 


e AudioRendererHost : Browser 进 程 端 同 Renderer 进 程 通信 并 有 调 
度 管理 输出 视频 流 的 功能 ， 对 于 每 个 输出 流 ， 有 相应 的 
AudioOutputStream 对 象 对 应 ， 并 且 通 过 AudioOutputController 类 来 
处 理 和 优化 输出 。 


e AudioOutputController : 该 类 控制 一 个 AudioOutputStream Xf R 
并 提供 数据 给 该 对 象 ， 提 供 play、pause、stop 等 功能 ， 因 为 它 控 
制 着 音频 的 输出 结果 。 

AudioOutputStream 和 AudioOutputProxy : 音频 的 输出 流 类 和 
HFX., AudioOutputProxy 是 一 个 使 用 优化 算法 的 类 ， 它 仪 在 
Start() 和 Stop() 遂 数 之 间 打 开 音 频 设备 ， 其 他 情况 下 音频 设备 都 是 
关闭 的 。AudioOutputProxy 使 用 AudioOutputDispatcher 打 开 和 关闭 
实际 的 物理 音频 设备 。 

AudioOutputDispatcher 和 AudioOutputDispatcherImpI : 控制 音 
频 设 备 的 接口 类 和 实际 实现 类 。 


经 过 上 面 对 类 的 解释 ， 相 信 读 者 有 了 一 个 大 致 的 思路 : WebKit 
和 Chromium 需 要 输出 解码 后 的 音频 数据 时 ， 通 过 从 右 侧 自 上 向 下 、 左 
侧 自 下 向 上 的 过 程 ， 然 后 使 用 共享 内 存 的 方式 将 解码 后 的 数据 输出 到 
实际 的 物理 设备 中 。 


11.3.2 Web Audio 


Audio 元 素 能 够 用 来 播放 各 种 格式 的 音频 ， 但 是 ，HTML5 还 拥有 
更 强大 的 能 力 来 处 理 声音 ， 这 就 是 web Audio。 该 规范 提供 了 高 层次 
的 JavaScript 接 口 ， 用 来 处 理 和 合成 声音 。 整 个 思路 就 是 提供 一 张 图 ， 
该 图 中 的 每 个 节点 称 为 AudioNode， 这 些 节 点 构成 处 理 的 整个 过 程 ， 
虽然 实际 的 处 理 是 使 用 C/C++ 来 完成 的 ， 但 是 web Audio 也 提供 了 一 些 
接口 来 让 Web 前 端 开发 者 使 用 JavaScript 代 码 来 调用 C/C++ 的 实现 。 
WebAudio 对 于 很 多 Web 应 用 很 有 帮助 ， 例 如 游戏 ， 它 能 够 帮助 开发 者 
设计 和 实时 合成 出 各 种 音效 。 


根据 W3C 的 Web Audio 规 范 的 定义 ， 整 个 处 理 过 程 可 以 看 成 一 个 
拓扑 图 ， 该 图 有 一 个 或 多 个 输入 源 ， 称 为 Source 节 点 。 ed 
都 可 以 看 成 各 种 处 理 过 程 ， 它 们 组 成 复杂 的 网 。 图 中 有 一 个 最 终 节 点 
称 为 “Destination”， 它 可 以 表示 实际 的 音频 设备 ， pees =e 
类 型 的 节点 。 上 述 图 中 的 所 有 节点 都 是 工作 在 一 个 上 下 文中 ， 称 为 
AudioContext， 如 图 11-15 所 示 。 


图 11-15 ”使 用 WebAudio 技 术 的 音频 图 


对 于 Sourcel 节 点 ， 它 没有 输入 节点 ， 只 有 和 输出 节点 。 对 于 中 间 的 
这 些 节 点 ， 它们 既 包 含 输入 节 点 也 包含 输出 节点 ， 而 对 于 Destination 
节点 ， 它 只 有 输入 节点 A 上 述 图 中 的 其 他 节点 都 是 可 
以 任意 定义 的 ， 这 些 节点 每 一 个 都 可 以 代表 一 种 处 理 算法 ， 开 发 者 可 
以 根据 需 要 设置 不 同 的 节点 以 处 理 出 不 同 效果 的 音频 输出 。 


中 间 这 些 节点 有 很 多 类 型 ， 它 们 的 作用 也 不 一 样 ， 这 些 节点 的 实 
现 通 常 由 C 或 者 C++ 代 码 来 完成 以 达到 高 性 能 ， 当 然 这 里 提供 的 接口 都 
是 JavaScript 接 口 。 


Web Audio 的 绝 大 多 数 处 理 都 是 在 WebKit 中 完成 的 ， 而 不 需 
Chromium 过 多 地 参与 ， 除 了 输入 源 和 输出 结果 到 实际 设备 ， 其 他 同 前 
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如 何 被 WebKit 支 持 的 。 


11-16 的 上 半 部 分 主要 是 支持 规范 中 的 标准 接口 ， 例 如 
AudioBufferSourceNode 、 AudioContext 、 DestinationNode 和 
OscillatorNode 等 类 ， 它 们 对 应 图 11-15 中 规范 定义 的 接口 ， 还 有 众多 的 
类 这 里 并 没有 绘制 出 。 下 面 重点 关注 的 是 OsicllatorNode 类 ， 它 需要 对 
音频 数据 进行 大 量 计算 ， 包 括 向 量 的 加 法 、 乘 法 等 。 同 时 该 节点 类 需 
要 使 用 PeriodicWave 来 计算 周期 性 波形 ， 这 里 面 需要 使 用 到 FFT (快速 
傅立叶 变换 ) 算法 ， 因 为 音频 的 及 时 性 ， 网 页 对 性 能 有 非常 高 的 要 
求 。 对 于 Chromium 移 植 ， 不 同 平台 采用 不 同 的 加 速算 法 ， 在 Windows 
和 Linux 上 使 用 FFmpeg 中 的 高 性 能 算法 ， 在 Android 上 使 用 OpenMax 
DL 提供 的 接口 来 加 速 ， 而 在 Mac 上 又 是 不 同 的 算法 。 


AudioBufferSourceNode AudioContext create DestinationNode 
| a ee E 
+buffer() < MAR -m_destinationNode 


+createBufferSourcel) 
- create |+createOscillator() 
re 
i 
一 一 一 一 
> 


< MAC 上 实现 | FFTFrameMac 


使 用 FFmpeg 实 现 


1 
VectorMath FFTFrameFFMPEG FFTFrameOpenM 
LU | 


图 11-16 ”WebKit 支 持 WebAudio 的 一 些 重要 基础 设施 


Web Audio 对 于 Web 领 域 来 说 很 重要 ， 一 个 重要 的 应 用 场景 就 是 游 
戏 ， 因 为 游戏 中 进 场 需 要 合成 音效 或 者 变换 出 不 同 的 音效 结果 ， 笔 者 


很 乐意 看 到 它 在 HIML5 中 发 展 得 越 来 越 好 ， 推 动 游戏 等 应 用 领域 的 发 
展 。 


11.3.3 MIDI 和 Web MIDI 


MIDI 是 一 个 通信 标准 ， 它 是 电子 乐器 之 间 ， 以 及 电子 乐器 与 电脑 
之 间 的 统一 交流 协议 ， 用 以 确定 电脑 音乐 程序 、 合 成 器 和 其 他 电子 音 
响 设 备 互相 交换 信息 与 控制 信号 的 方法 。 同 其 他 的 声音 格式 不 同 ， 
MIDI 不 是 记录 采样 信息 ， 而 是 记录 乐器 的 演奏 指令 。 现 在 ， 在 web 中 
支持 MIDI 变 成 了 一 个 非常 热门 的 话题 。 


音频 也 可 以 以 MIDI 格 式 来 存储 ， 但 是 该 格式 并 不 是 HTML5 的 标 
准 ， 所 以 浏览 器 并 没有 内 置地 支持 它们 。 为 了 能 让 MIDI 格 式 的 音乐 播 
放出 来 ， 可 以 使 用 JavaScript 人 代码， 这 就 是 MIDI.js。 它 使 用 上 面 提 到 的 
WebAudio 技 术 和 Audio 元 素来 实现 音乐 的 播放 ， 在 Chromium 中 效果 非 
单 不 错 。 


但 是 这 也 只 能 做 到 播放 MIDI 格 式 的 音频 文件 ， 能 否 在 JavaScript 中 
利用 代码 来 控制 MIDI 输 入 和 输出 设备 呢 ? 也 融 是 能 够 读 入 MIDI 的 输 
入 信息 ， 由 JavaScript 代 码 将 其 信息 处 理 成 MIDI 格 式 的 指令 并 传送 到 输 
出 设备 ， 这 就 是 现在 兴起 的 Web MIDI 技 术 。 目 前 的 规范 定义 了 一 系列 
接口 来 接收 和 发 送 MIDI 指 令 ， 但 是 该 技术 本 身 并 不 提供 语义 上 的 控 
制 ， 而 只 是 负责 传输 这 些 指令 ， 所 以 泻 染 引 擎 其 实 并 不 知道 这 些 指令 
的 实际 含义 ， 这 是 跟 Web Audio 非 常 不 一 样 的 地 方 。 


根据 上 面 的 描述 ，Web MIDI 规 范 中 定义 了 输入 和 输出 的 MIDI 设 
备 ， 如 MIDIImput 和 MIDIOutput， 通 过 MIDIAccess 接 口 返回 到 所 有 枚 


举 的 输入 和 输出 设备 。MIDIImput 主 要 包含 一 个 接收 指令 的 函数 ， 叫 
onMessage， 而 MIDIOutput 包 含 一 个 发 送 指令 的 图 数 ， 叫 send， 而 发 送 
的 数据 指令 就 是 MIDIEvent， 该 指令 包含 一 个 时 间 惟 和 数据 。MIDI 规 
范 也 是 草案 阶段 ， 所 以 支持 它 的 浏览 器 很 少 ， 在 2013 年 6 月 ，Google 泻 
染 在 Chromium 的 开发 者 版 本 中 加 入 了 Web MIDI 的 支持 ， 这 是 一 个 非 
常 大 的 进展 ， 虽 然 只 是 处 于 起 步 阶段 。 


WebKit 和 Chromium 对 于 Web MIDI 的 支持 主要 包括 三 个 部 分 ， 第 
一 是 加 入 JavaScript 的 绑 定 ， 这 个 技术 前 面 已 经 介绍 过 了 ; 第 二 是 将 对 
MIDI 接 口 的 支持 从 Renderer 进 程 桥 接 到 Browser 进 程 ; 第 三 是 
Chromium 的 具体 实现 ， 如 图 11-17 所 示 。 


MIDIManager MIDIPortlnfo 


+StartSession() -manufacturer 
+EndSession() -id 


+DispatchSendMIDIData() -name 
+input_ports() -version 
+output_ports() 


图 11-17 ”Chromium 中 的 MIDI 实 现 类 们 


11.3.4 Web Speech 


HTML5 对 声音 方面 的 支持 绝 不 仅仅 是 上 面 介绍 的 这 么 多 ， 现 在 还 
有 一 项 非常 重要 的 应 用 ， 那 就 是 语音 识别 技术 (Speech-to-Text) MA 
成 语音 技术 (Text-to-Speech) ， 它 们 已 经 被 广泛 地 应 用 在 很 多 领域 。 
简单 来 说 ， 就 是 从 语音 识别 出 文本 文字 和 从 文本 文字 生成 声音 资源 。 


HTML5 中 的 “Web Speech AP 是 由 Google 公 司 发 起 的 规范 ， 其 目 
的 是 将 语音 识别 和 合成 语音 技术 提供 给 JavaScript 接 口 ， 这 样 Web 前 端 


开发 者 可 以 在 网 页 中 使 用 它们 。 所 以 ， 这 一 规范 主要 包括 两 个 接口 : 
SpeechRecognition 和 SpeechSynthesis， 分 别 标识 上 述 两 种 功能 。 


自然 而 然 地 ，W3C 定 义 了 两 个 主要 的 接口 ， 分 别 对 应 识别 和 合成 
技术 ， 接 口 定义 比较 清晰 简单 ， 例 如 对 于 SpeechRecognition， 当 调用 
start(O) 国 数 时 就 开始 语音 识别 ， 而 后 面 的 事件 句柄 则 是 让 开发 者 知道 识 
别 的 状态 ， 当 识别 完成 之 后 ， 可 以 通过 监听 “onresult* 来 获取 识别 的 结 
果 。 


interface SpeechRecoginition { interface SpeechSynthesis { 

void start(); readonly attribute boolean pending; 
void stop(); readonly attribute boolean speaking; 
void abort(); readonly attribute boolean paused; 


attri 
EE 


attri 


bute EventHandler 
bute EventHand] 


bute EventHandler 


onaudiostart; 


r onsoundstart; 


onspeechstart; 


void speak (SpeechSynthesisUtterance utterance) ; 


void cancel (); 


attribute EventHandler onspeechend; void pause (); 


attribute EventHandler onsoundend; void resume (); 


attribute EventHandler onaudioend; SpeechSynthesisVoiceList getVoices(); 


attribute EventHandler onresult; Ve 
attribute EventHandler onnomatch; 


attribute EventHandler o 


attribute EventHandler onstart; 
attribute EventHandler onend; 


] 


图 11-18 W3C Speech API 草 案 定义 的 主要 接口 


而 对 于 SpeechSynthesis 接 口 ， 规 范 定 义 的 主要 是 speak0 方 法 ， 该 
万 法 的 参数 SpeechSynthesisUtterance 非 常 重 要。 该 参数 包含 了 输入 的 
文本 ， 并 能 提供 各 种 合成 过 程 中 的 状态 ， 实 际 输出 结果 可 以 通过 调用 
getVoices0) 孙 数 来 获得 语音 结果 。 


遗憾 的 是 ， 目 前 Chromium 中 对 该 规范 的 实现 依赖 于 Google API 
(也 就 是 网 络 服务 接口 ) ， 这 也 意味 着 用 户 不 能 离线 使 用 这 些 功能 ， 
因为 语音 的 识别 是 需要 服务 器 端 提 供 的 能 力 。 同 时 还 有 一 个 问题 ， 如 


果 开 发 者 希望 自己 在 Chromium 中 编译 一 个 浏览 器 或 者 其 他 应 用 ， 可 是 


这 些 功 能 是 受 限 的 ， 开 发 者 必须 向 Google 申 请 一 个 称 为 “API Keys” AY 
密 钥 文 件 ， 也 就 是 必须 获得 使 用 这 些 Google API 的 授权 。 在 未 来 ， 笔 
者 希望 能 够 有 不 依赖 于 服务 的 语音 识别 和 合成 语音 技术 的 出 现 。 


11.4 WebRTC 
11.4.1 历史 


相信 读者 都 有 过 使 用 Tencent QQ 或 者 FaceTime 进 行 视 频 通 话 的 经 
历 ， 这 样 的 应 用 场景 相当 典型 和 流行 ， 但 是 基本 上 来 说 它们 都 是 每 个 
公司 推出 的 私有 产品 ， 而 且 通 信 等 协议 也 都 是 保密 的 ， 这 使 得 一 种 产 
品 的 用 户 基本 上 不 可 能 同 其 他 产品 的 用 户 进行 视频 通信 。 还 有 一 些 更 
大 的 应 用 场景 ， 那 就 是 众多 用 户 一 起 召开 视频 会 议 ， 这 比 简单 的 点 对 
点 更 为 复杂 ， 很 多 公司 已 投身 其 中 ， 因 为 这 一 市 场 非常 广大 。 


几 年 前 ， 笔 者 是 很 难 想象 这 么 复杂 的 需求 和 应 用 场景 能 够 在 Web 
领域 中 被 实现 ， 但 是 现在 Chromium 和 Firefox 浏 览 器 都 支持 Web 视 频 通 
言 ， 而 且 神 奇 的 是 它们 之 间 也 可 以 相互 通信 ， 听 起 来 非常 不 可 思议 
只 是 需要 Web 开 发 者 使 用 JavaScript 和 HTML5 技 术 就 可 以 完成 ， 还 
是 免费 的 ， 而 且 还 不 需要 额外 安装 应 用 软件 ， 不 需要 额外 安装 插件 。 
现在 真是 互联 网 和 HTML5 技 术 的 好 时 代 ， 这 也 是 HIML5 的 多 媒体 领 
域 的 一 个 重大 进展 。 


WebRTC (Web Real Time Communication) 技术 ， 中 文 全 称 为 Web 
实时 通信 技术 ， 它 是 一 种 提供 实时 视频 通信 的 规范 ， 目 前 是 W3C 推 荐 
的 规范 。 它 是 一 个 开放 的 规范 ， 任 何人 都 可 以 免费 使 用 ， 目 前 


Chromium/Chrome 和 Firefox 浏览 器 都 支持 了 该 规范 。 WebRIC 是 
HTML5 对 多 媒体 支持 的 一 个 重大 进展 ， 因 为 该 技术 不 仅 使 用 了 音 视 频 
的 输入 和 输出 ， 而 且 还 涉及 连接 等 网 络 连 接 ， 是 一 个 非常 复杂 但 非常 
有 用 的 技术 。 图 11-19 是 一 个 简单 的 示意 图 ， 说 明 两 个 支持 WebRTC 规 
范 的 浏览 器 之 间 是 如 何 进行 视频 通信 的 。 事 实 上 ，WebRTC 既 允许 使 
用 服务 器 来 进行 通信 ， 也 支持 点 对 点 (Peer-to-Peer) 通信 ， 当 然 需 


服务 器 的 辅助 。 
Firefox 
Chrome 


标准 协议 


11-19 ”Chromium/Chrome 和 Firefox 浏 览 器 的 视频 通信 示例 


不 过 ， 很 多 事情 并 非 是 一 跳 而 就 的 ， 何 况 这 么 复杂 的 WebRTC 技 
术 ，WebRTC 发 展 至 今 也 经 历 了 很 长 的 过 程 。 首 先 得 从 一 个 音 视频 的 
捕获 需求 开始 。 最 初 ，HTML5 希 望 能 够 提供 一 种 捕获 用 户 音 频 和 视频 
的 技术 ， 这 就 是 getUserMedia， 当 然 刚 开始 也 不 是 它 ， 而 是 使 用 下 面 
的 语句 来 完成 音频 和 视频 的 捕获 。 


<input type="file" accept="video/*;capture=camcorder"> 


<input type="file" accept="audio/*;capture=microphone"> 


但 是 它们 太 简 单 了 ， 只 能 将 捕获 的 信息 保存 为 一 个 文件 或 者 一 个 
快照 ， 这 显然 不 能 满足 很 多 实际 的 需求 ， 之 后 一 个 新 的 元 素 定 义 诞 
生 ， 就 是 使 用 “device” 元 素 ， 这 一 元 素 很 快 被 抛弃 。 这 就 是 
getUserMedia 的 前 身 ， 但 标准 化 组 织 很 快 从 “device” 元 素 转 向 
getUserMedia， 它 的 基本 使 用 方式 是 : 


navigator.getUserMedia({video: true, audio: true}, function 


(videostream) { .. }); 


思想 很 简单 ， 就 是 在 navigator 这 个 全 局 对 象 下 加 入 一 个 新 接口 ， 
该 接口 使 用 两 个 参数 ， 第 一 表示 它 需 要 捕获 视频 或 者 音频 或 者 两 者 都 
需要 ， 第 二 个 是 一 个 回调 函数 ， 当 捕获 成 功 后 ， 将 捕获 的 视频 流 可 以 
输出 到 一 个 视频 元 素 ， 这 就 像 是 一 个 从 服务 器 加 载 的 视频 文件 ， 当 然 
它 是 一 个 视频 流 ， 所 以 某 些 查找 (Seek) 操作 不 能 工作 。 这 里 ， 不 再 
使 用 新 元 素 ， 而 是 利用 原 有 的 “video” 元 素 ， 实 在 是 一 个 好 的 设计 。 


在 这 之 后 ， 一 个 更 为 大 胆 和 激进 的 想法 诞生 了 ， 就 是 将 RTC 技 术 
引入 到 HIML5 中 来 ， 这 就 是 webRTC 技 术 ， 因 为 getUserMedia 是 入 
口 ， 所 以 自然 而 然 地 被 使 用 到 WebRTC 技 术 的 规范 中 来 。 


11.4.2 ”原理 和 规范 


大 家 可 以 在 脑海 中 想象 一 下 如 何 要 构建 一 个 网 络 视频 通信 、 需 要 
哪些 部 分 的 参与 及 共同 工作 才能 完成 整个 过 程 。 总 体 上 ， 这 一 过 程 中 
需要 三 种 类 型 的 技术 ， 其 一 是 视频 ， 其 二 是 音频 ， 其 三 是 网 络 传输 。 
在 这 三 种 技术 上 ， 具 体 需 要 以 下 一 些 部 分 。 


音 视频 输入 和 输出 设备 : 同音 视频 播放 不 同 ， 因 为 它们 只 是 需要 
输出 设备 ， 这 里 需要 输入 和 输出 设备 《麦克 风 和 摄像 头 ) 。 同 
时 ， 输 入 使 用 getUserMedia 技 术 ， 而 输出 ， 基 本 上 可 以 采用 音 视 
频 播 放 的 基本 框架 ， 当 然 ， 需 要 一 些 额 外 的 支持 。 

网 络 连接 的 建立 : 因为 视频 通信 需要 不 停 地 传送 大 量 数据 ， 所 以 
需要 建立 一 种 可 靠 的 网 络 连接 来 让 各 个 参与 方 传输 数据 。 

数据 捕获 、 编 码 和 发 送 : 当 用 户 打开 设备 之 后 ， 需 要 捕获 这 些 数 
据 并 对 它们 进行 编码 ， 因 为 原始 数据 的 数据 量 太 大 ， 然 后 需要 将 
编码 后 的 数据 通过 连接 传输 出 去 。 

数据 接收 、 解 码 和 显示 : 接收 来 自 其 他 方 的 数据 流 并 进行 解码 ， 
然后 显示 出 来 ， 这 个 需求 跟 播 放 媒 体 文 件 的 需求 比较 类 似 。 


根据 上 面 的 解释 ， 不 难 理解 图 11-20 所 描述 的 过 程 ， 结 合 这 些 主要 
组 成 部 分 ， 构 成 了 一 个 比较 完整 的 音 视频 通信 过 程 。 


数据 接收 、 
APRA AM 显 小 


图 11-20 ”使 用 WebRTC 技 术 的 视频 通信 详细 过 程 


下 面 了 解 一 下 规范 中 如 何 针对 上 面 的 描述 来 定义 相应 的 JavaScript 
接口 的 。 根 据 目前 W3C 推 荐 的 规范 草案 ， 主 要 包括 以 下 几 个 部 分 。 


e Media Capture and Streams 规 范 和 WebRTC 对 它 的 扩展 ， 这 个 主要 
是 依赖 摄像 头 和 麦克 风 来 捕获 多 媒体 流 ，WebRTC 对 它 进行 扩 
展 ， 使 得 多 媒体 流 可 以 满足 网 络 传输 用 途 ， 也 就 是 “video” 元 素 可 
以 来 产 于 多 媒体 流 而 不 仅仅 是 资源 文件 。 

点 到 点 的 连接 ， 也 就 是 规范 中 的 RTCPeerConnection 接 口 ， 它 能 够 
建立 端 到 端的 连接 ， 两 者 直接 通过 某 种 方式 传输 控制 信息 ， 至 于 
方式 并 没有 进行 规定 。 

RTCDataChannel 接 口 ， 通 过 该 接口 ， 通 信 双 方 可 以 发 送 任何 类 型 
的 消息 ， 例 如 文本 或 者 二 进 制 数据 ， 这 个 不 是 必须 的 。 不 过 这 一 
功能 极 大 地 方便 了 开发 者 ， 其 主要 思想 来 源 于 WebSocket。 


11.4.3 ”实践 一 一 一 个 WebRTC 例 子 


在 介绍 内 部 原理 之 前 ， 笔 者 希望 通过 剖析 W3C 规 范 中 的 一 个 例子 
来 进一步 加 深 对 它 的 理解 。 示 例 代 码 11-5 来 源 于 W3C WebRTC 规 范 中 
的 示例 代码 ， 笔 者 稍微 作 了 一 些 修改 以 简化 理解 ， 并 加 入 注释 作 进 一 
步 说 明 。 


这 里 主要 是 点 对 点 的 直接 通信 ， 当 然 需 要 借助 于 网 络 提供 的 NAT 
服务 ， 其 中 包括 三 个 文件 ， 第 一 个 是 双方 共享 的 JavaScript 代 码 ， 第 二 
个 是 发 起 端的 HTML 人 代码， 第 三 个 是 接收 端的 HTML 代 码 。 通 常 第 二 
个 和 第 三 个 可 以 是 一 样 的 ， 这 里 为 了 方便 理解 作 了 少许 区 别 。 因 为 代 
码 中 已 经 作 了 较为 详细 的 讲解 ， 所 以 后 面 不 再 交 述 其 中 的 原理 。 


示例 代码 11-5 使 用 WebRTC 技 术 的 P2P 网 络 视频 通信 


JavaScript 文 件 : common.js 

// 创建 消息 通道 ， 例 如 使 用 XMLHttpRequest 或 者 webSocket。 根 据 WebRTC 
规范 的 说 明 

// 本 身 WebRTC 不 提供 双方 进行 控制 信息 传输 的 通道 ， 由 开发 者 自行 选择 合适 的 
方法 

// 这 里 ， 简 单 使 用 一 个 函数 表示 创建 了 一 个 通道 ， 该 通道 包含 一 个 能 够 发 送 消 
息 的 “send” 


var signalChannel = createSignalChannel(); 


// 将 ICE 的 Candidate 发 送 给 对 方 ， 这 个 是 ICE 定 义 的 ， 主 要 是 ICE 协 议 用 来 建 
Wek 
// 要 的 信息 。 双 方 需要 交互 这 个 信息 
function sendCandidate(candidate) { 
if (candidate) signalChannel.send(JSON.stringify({ 
"candidate": candidate })); 
} 
function sendDescription() { 
signalingChannel.send(JSON.stringify({ "sdp": 
conn.localDescription })); 
} 
SignalingChannel.onmessage = function (event) { 
// 如 果 没 有 建立 连接 ， 需 要 创建 ， 在 这 里 表明 这 是 接受 者 端 
if (conn == null) start(); 
// 从 控制 信息 中 获取 信息 内 容 
var message = JSON.parse(event.data); 


// 如 果 信 息 类 型 是 设置 Description 相 关 的 ， 就 调用 


setRemoteDescription 
if (message.sdp) { 
conn.setRemoteDescription(new 
RTCSessionDescription(message.sdp), function () { 
// 如 果 受 到 一 个 请 求 (offer) ， 需 要 答复 它 ， 这 里 应 该 是 接收 方 处 理 
的 
if (conn.remoteDescription.type == "offer") { 
conn.createAnswer(function(desc) { 
conn.setLocalDescription(desc, sendDescription); 
3); 
} else if (message.candidate) { 
conn.addIceCandidate(new 


RTCIceCandidate(message.candidate) ); 


} 
}; 
// 用 来 存放 RTCPeerConnection 对 象 
var conn = null; 
// 用 来 显示 从 自身 设备 捕获 的 多 媒体 流 
var selfView = document.getElementById("selfView" ); 
// 用 来 显示 从 对 方 传送 过 来 的 多 媒体 流 


var remoteView = document.getElementById("remoteView"); 


// 开始 创建 连接 等 
function start() { 
// 创建 连接 
conn = new RTCPeerConnection({ "iceServers": [{ "url": 


"stun:stun. example.org" }] }); 


// 保存 从 自身 捕获 的 多 媒体 流 

var capturedStream = null; 

// 捕获 音 视频 

navigator.getUserMedia({ "audio": true, "video": true }, 

function (stream) { 

// 将 捕获 的 多 媒体 流 使 用 “video” 元 素 播 放出 来 
selfView.src = URL.createObjectURL(stream) ; 
capturedStream = stream; 

} 

// 将 多 媒体 流 加 入 连接 


conn.addStream(capturedStream) ; 


// 接收 到 ICE Candidate 事 件 ， 需 要 将 candidate 信 息 传送 给 对 方 

conn.onicecandidate = function (event) { 
sendCandidate(event.candidate) ; 

}; 

// 这 个 是 由 发 起 者 调用 ， 因 为 接收 者 不 会 发 送 该 事件 

conn.onnegotiationneeded = function() { 
// 创建 一 个 0ffer， 然 后 发 送 给 接收 者 
conn.createoffer(function (desc) { 

conn.setLocalDescription(desc, sendDescription) ; 

); 

}); 

// 将 远 端 多 媒体 流 使 用 “video” 元 素 显示 出 来 

conn.onaddstream = function (evt) { 


remoteView.src = URL.createObjectURL(evt.stream); 


}; 


体 流 


通信 


发 起 者 HTML 文 件 节选 : 

<video id="SelfView" autoplay ></video> 
<video id="remoteView" autoplay></video> 
<script src='common.js'></script> 
<script> 


// 上 面 的 两 个 "video" 元 素 分 别 用 来 显示 自己 捕获 的 多 媒体 流 和 对 方 的 多 媒 


// 实际 情况 中 ， 可 能 是 某 个 用 户 作为 发 起 者 单 击 了 “开始 "按钮 ， 启 动 音 视频 


start(); 


</script> 


接受 者 HTML 文 件 节选 : 
<video id="selfView" autoplay ></video> 
<video id="remoteView" autoplay></video> 


<script src='common.js' type='javascript'></script> 


相信 通过 上 面 的 代码 介绍 ， 读 者 应 该 理解 使 用 WebRTC 构 建 一 个 


P2P 视 频 通 信 的 基本 过 程 ， 这 其 中 网 络 连接 的 部 分 主要 基于 ICE 协 议 
(NAT) 和 SDP 协 议 ， 以 及 一 些 支 持 NAT 的 辅助 设施 (STUN 和 
URN) ， 有 兴趣 的 读者 可 以 自行 查阅 相关 技术 文档 。 


11.4.4 ”WebKit 和 Chromium 的 实现 


下 面 来 看 一 看 webKit 和 和 Chromium 是 如 何 支持 WebRTC 规 范 的 。 笔 
者 首先 需要 澄清 一 下 关于 WebRTC 的 两 种 解释 ， 本 节 中 会 有 两 种 
WebRTC 用 法 : 一 种 是 指 WebRTC 这 项 技术 和 规范 ; 另 一 种 是 webRTC 
这 个 项 目 ， 它 是 支持 WebRTC 规 范 的 一 个 开源 项 目 。 默 认 情 况 下 是 指 
前 者 ， 如 果 是 指 WebRTC 这 个 开源 项 目 ， 笔 者 会 明确 指出 。 


下 面 来 了 解 一 下 从 webrtc.org 上 介绍 的 关于 支持 WebRTC 技 术 的 内 
部 框 RM 功能 模块 ， 图 ua 来 R 于 
“http://www.webrtc.org/reference/architecture” 的 架构 图 ， 但 是 缩减 了 其 
中 一 些 部 分 。 这 里 所 示 的 是 实现 了 WebRTC 功 能 的 开源 项 目 架构 图 。 


图 11-21 中 主要 包括 三 大 方面 ， 即 语音 、 视 频 和 传输 ， 它 们 三 个 构 
成 了 WebRTC 的 主要 组 成 部 分 。 其 中 iSAC (internet Speech Audio 
Codec) 和 iLBC (internet Low Bitrate Codec) 是 两 种 不 同 的 音频 编码 
格式 ， 是 为 了 适应 互联 网 的 语音 传输 要 求 而 存在 的 ， 前 者 是 针对 带宽 
比较 大 的 情况 ， 后 者 针对 带宽 较 小 的 情况 ， 目 前 都 是 可 以 免费 使 用 
的 。 其 中 VP8 同 样 是 Google 提 供 免 费 视频 格式 ， 前 面 介 绍 过 了 。 传 输 
部 分 主要 是 加 入 了 对 前 面 协议 的 支持 模块 。 在 会 话 管理 中 ， 主 要 使 用 
一 个 开源 项 目 libjingle 来 进行 管理 。 下 面 灰色 部 分 主要 是 webRTC 工 作 
时 依赖 的 下 层 功 能 的 接口 ， 在 Chromium 浏 览 器 中 ， 它 会 提供 相应 接口 
和 功能 给 WebRTC 使 用 。 


RTCPeerConnection 接口 


会 话 管理 和 抽 线 的 控制 信息 会 话 Clibjingle ) 


语音 引擎 视频 引擎 


iSAC/iLBC 格式 VP8 格式 多 路 传输 
噪声 消除 X| Jo bea om ICE+STUN+TURN 


音频 捕获 和 演 染 视频 捕获 网 络 IO | 


图 11-21 WebRTC 项 目的 架构 图 


上 面 是 WebRTC 开 源 项 目的 架构 图 ， 在 Chromium 中 ， 通 常 使 用 
WebRTC 项 目 来 完成 WebRTC 规 范 的 功能 ， 并 使 用 libjingle 项 目 来 建立 
点 到 点 的 连接。 所 以 ，Chromium 主 要 的 目的 是 将 WebRTC 和 libjingle 的 
能 力 桥 接 到 浏览 器 中 来 ， 先 看 WebRTC 规 范 中 建立 连接 所 需要 的 相关 
基础 设施 ， 图 11-22 是 WebKit、Chromium 及 Chromium 中 使 用 libjingle 的 
类 的 层次 图 。 
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图 11-22 ”WebKit 和 Chromium 建 立 连接 的 基础 设施 


基础 设施 主要 分 成 三 个 层次 ， 首 先是 webKit， 也 就 是 最 上 面 的 部 
该 部 分 最 上 面 的 类 是 RTCPeerConnection， 从 名 字 就 可 以 猜 出 ， 该 

是 对 WebRTC 连 接 的 接口 类 ， 实 际 上 它 就 是 从 规范 中 定义 的 
aie 口 文件 生成 的 基本 框架 ， 当 然 真 正和 JavaScript5| 
擎 打交道 还 需要 一 个 桥接 类 。 该 桥接 类 包含 一 个 实际 实现 的 连接 类 名 
柄 m_peerHandler， 它 是 这 个 连接 所 包含 的 本 地 多 媒体 流 和 远 端 对 方 的 
多 媒体 流 。 读 者 可 以 想象 一 下 视频 会 议 的 场景 ， 首 先 Webkit 需 要 将 本 
地 的 多 媒体 流 收集 起 来 ， 通 过 连接 传输 给 对 方 ， 本 地 可 以 选择 是 否 通 
过 “video” 播 放 。 同 时 需要 接收 从 对 方 传输 过 来 的 多 媒体 流 ， 这 也 是 
WebRTC 的 主要 部 分 。 当 然 还 包括 DataChannel 相 关 对 象 ， 这 里 没有 标 
出 。 


至 于 接 下 来 的 部 分 就 是 WebKit 的 实现 类 ， 该 类 能 够 满足 
RTCPeerConnection 的 功能 要 求 ， 但 是 它 需 要 通过 不 同 移植 的 实现 才能 
完成 ， 因 为 本 身 WebKit 的 WebCore 并 没有 这 样 的 能 力 。 在 WebKit 的 
Chromium 中 同样 定义 了 两 个 类 WebRTCPeerConnectionHandler 和 


WebRTCPeerConnectionHandlerClient， 根 据 WebKit 的 类 名 定义 方式 ， 
前 者 是 需要 Chromium 来 实现 ， 而 后 者 则 是 由 Chromium 调 用 ， 并 由 
WebKit 来 实现 的 ， 这 里 主要 是 应 用 连接 事件 的 监听 六 数 ， 所 以 WebKit 
能 够 将 它们 传递 给 JavaScript 引 | 擎 。 


之 后 是 Chromium 的 实现 类 。RTCPeerConnectionHandler 类 继承 自 
WebKit 的 Chromium 移 植 的 接口 类 ， 并 做 了 具体 的 实现 ， 这 就 是 
content::RICPeerConnectionHandler ， e 同时 集成 B 
PeerConnectionHandleBase 类 ， 而 该 类 拥有 了 支持 建立 连接 所 需 的 能 
力 ， 当 然 它 是 依赖 于 libjingle 项 目 提供 的 连接 能 力 。 


libjingle 提 供 了 建立 和 管理 连接 的 能 力 ， 支 持 透 过 NAT 和 防火 墙 设 
备 、 代 理 等 建立 连接 。libjingle 不 仅 支 持 点 到 点 的 连接 ， 也 支持 多 用 户 
连接 。 同 时 还 包含 了 连接 所 使 用 的 MediaStream 接 口 ， 这 是 因为 
Chromium 本 身 不 直接 使 用 WebRTC 项 目 提供 的 接口 ， 而 是 调用 libjingle 
来 建立 连接 ， 并 使 用 libjingle 提 供 的 MediaStream 接 口 ， 而 libjingle 本 身 
则 会 使 用 webRTC 项 目的 音 视 频 处 理 引 擎 。 


接 下 来 要 介绍 的 是 多 媒体 流 ， 它 需要 一 个 非常 复杂 的 框架 ， 首 先 
来 看 WebKit 是 如 何 支 持 getUserMedia 这 个 接口 的 。 图 11-23 描 述 了 
WebKit， 以 及 WebKit 的 Chromium 移 植 中 所 定义 的 接口 ， 图 中 虚线 上 半 
部 分 是 webKit 中 的 类 ， 下 半 部 分 是 Chromium 中 的 类 。 
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图 11-23 WebKit 支持 多 媒体 流 的 基础 设施 


最 上 层 是 WebKit 支 持 多 媒体 流 编程 接口 提供 的 具体 实现 类 ， 如 
NavigatorMediaStream 类 ， 而 直接 同 V8 JavaScript 引擎 桥 接 的 类 是 
V8NavigatorUser-MediaSuccessCallback ， 它 是 一 个 绑 定 类 。 为 
getUserMedia 接 口 主要 是 返回 一 个 MediaStream 对 象 ， 而 MediaStream 类 
可 以 提供 众多 访问 数据 流 的 接口 ， 而 连接 的 目的 就 是 需要 将 
MediaStream 对 应 的 多 媒体 流传 输出 去 。 图 中 UserMediaRequest 类 负责 
请 求 创 建 一 个 MediaStream 对象 。 在 WebKit 的 Chromium 移 植 中 ， 定 义 
WebUserMediaClient 为 一 个 接口 类 ，Chromium 需 要 新 建 子 类 来 实 ae 
—IJBE, iii Chromium by MediaStreamImpIz, CERAIN 
中 还 会 出 现 。 


WebKit 中 使 用 MediaStreamRegistry 类 来 注册 和 管理 对 应 的 类 ， 管 
理 类 根据 ID 信息 来 识别 各 个 多 媒体 数据 流 。 在 接口 层 中 ，Chromium 移 
植 使 用 WebMediaStream 类 来 表示 多 媒体 流 ， 使 用 
WebMediaStreamRegistry 类 来 表示 注册 管理 类 


下 面 的 问题 是 MediaStream 接 口 需要 提供 各 种 事件 给 网 页 ， 因 为 很 
多 实际 的 工作 是 在 Chromium 中 来 完成 的 ， 所 以 MediaStreamImpl 会 将 
这 些 事件 从 Chromium 传 递 给 webKit。 同 时 因为 Chromium 的 多 进程 和 
沙 箱 模 型 ， 一 些 工作 需要 在 Browser 进 程 中 完成 ， 所 以 可 以 见 到 如 
11-24 所 摘 述 的 跨 进 程 的 基础 设施 。 
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11-24 Chromium 支持 MediaStream 接 口 基础 设施 


IPC 左 侧 部 分 是 Browser 进 程 中 的 两 个 主要 类 ， 分 别 是 消息 处 理 类 
和 MediaStream 的 管理 类 ， 该 管理 类 知道 MediaStream 对 应 的 网 页 是 什 
么 ， 并 将 事件 (如 创建 和 销毁 等 ) 传 回 Renderer 进 程 。 右 侧 是 消息 派 
发 类 ， 主 要 帮助 MediaStreamImpl 类 来 完成 与 Browser 进 程 相关 的 
MediaStream 消 息 的 传递 。 


实际 上 ，MediaStream 可 以 表示 本 地 的 多 媒体 流 ， 也 可 以 表示 远 端 
的 多 媒体 流 。 对 于 本 地 的 多 媒体 流 ， 需 要 音频 和 视频 的 捕获 机 制 ， 同 
时 使 用 上 面 建立 的 连接 传输 给 远 端 。 对 于 远 端 的 多 媒体 流 ， 需 要 使 用 
连接 来 接收 数据 ， 并 使 用 到 音频 和 视频 的 解码 能 力 。 下 面 分 成 四 个 部 
分 来 分 别 介 绍 。 


首先 是 音频 的 捕获 机 制 ， 图 11-25 描 述 了 该 机 制 使 用 的 主要 类 。 当 
网 页 需要 创建 多 媒体 流 的 时 候 ，MediaStreamImpl 会 创建 音频 捕获 类 ， 
也 就 是 webRtcAudioCapturer 类 ， 如 图 中 上 半 部 分 。 因 为 捕获 音频 需要 
音频 输入 设备 ， 所 以 使 用 AudioDeviceFactory 工 厂 类 创建 一 个 逻辑 上 的 


AudioInputDevice 对 R 。 另外 一 个 重要 的 类 是 
WebRtcAudioDeviceImpl ， 用 来 表示 音频 的 设备 ， 该 类 继承 自 
WebRtcAudioDeviceNotImpl 类 。 这 其 实 是 继承 自 libjingle 和 WebRTC 项 
目 中 的 抽 线 接口 的 一 个 桥接 类 ， 用 来 表示 它们 需要 的 音频 设备 ， 当 然 
包括 输入 设备 。 同 样 因为 Renderer 进 程 不 能 访问 音频 输入 设备 ， 所 以 
需要 IPC 来 完成 这 一 功能 ，Browser 进 程 的 AudioInputController 会 控制 
和 访问 设备 ， 而 AudioInputDeviceManager 可 以 管理 和 控制 所 有 输入 设 
备 。 


MediaStreamlmpl MediaStreamDepende 
or ee ee ae ncyFactory 
T T 
1 I 
1 1 
| 
WebRtcAudioCapturer n:1 WebRtcAudioDevicelmpl 
Renderer 进程 +SetCapturerSource() | > 
7 1 
1 1 | 
AudiolnputController AVA AA 
AudiolnputDevice | creatq AudioDevice WebRtcAudioDeviceNotl 
<-- Factory mp! 
A : l 
i 不 | 
1 1 
上 AVA L V 
AudiolnputRendererHost IPC AudiolnputIPC | 
A i 
a 
Browser 进程 AudiolnputDeviceManager ne 
ule 


图 11-25 Chromium 本 地 捕获 音频 的 基础 设施 


其 次 是 处 理 远 端 多 媒体 流 中 的 音频 解码 和 播放 功能 。 图 11-26 是 
Chromium 处 理 远 端 音 频 流 所 需要 的 一 些 主 要 类 及 关系 图 。 这 里 不 涉及 
连接 如 何 接收 传输 的 数据 ， 因 为 Chromium 是 使 用 libjingle 和 WebRTC 项 
目 来 完成 连接 的 功能 。Chromium 使 用 WebRtcAudioRender 类 来 完成 音 
频 泻 染 ， 该 桥接 类 会 被 WebMediaPlayer 作 为 泻 染 音 频 的 实现 类 ， 其 作 
用 主要 是 将 MediaStream 的 数据 同 实际 的 音频 泻 染 类 结合 起 来 。 


We bMediaP layer MediaStreaml mpl 
fe +CreateRemoteAudioRenderer() 
1 


| i create 
1 1 
MediaStreamAudioR We bRtcAudioRenderer We bRtcAudioDevice imp! 
= ii Eoo Po His TENA 
11-26 Chromium 处 理 远 端 音频 基础 设施 


再 次 是 从 视频 输入 设备 请 求 捕获 本 地 视频 流 ， 图 11-27 是 该 功能 依 
赖 的 一 些 主要 类 。 


media::VideoCaptur MediaS tre ami mp! MediaStreamDe pendencyFactory 
eDevice s 人 | SS +CreateNativeMediaSources() 
i T 


1 
| 
1 
RtcVideoCapaturer 


| RtcVideoCaptureDelegate 


1 -capture_engine_ 
1 


! 1 
VideoCaptureContro i y 
ller i VideoCapturelmplManager 


+AddDevice() 


media::VideoCapture 
+StartCapture() 


1 `` 
i l i create 下 


VideoCapture Host IPC VideoCaptureMessageFilter £- - - - - -| 
: 


VideoCapturelmp! 
+StartCapture() 


cricket::VideoCapturer 


图 11-27 ”Chromium 本 地 捕获 视频 的 基础 设施 


首先 看 虚线 右 侧 Renderer 进 程 中 的 设施 。 同 样 是 MediaStreamImpl 
类 发 起 ， 由 辅助 工厂 类 MeidaStreamDependencyFactory 帮 助 创建 一 个 
RtcVideoCapaturer， 用 来 获取 视频 。 该 类 有 两 个 作用 ， 其 一 是 实现 
libjingle 和 WebRTC 项 目 中 的 接口 类 ， 因 为 需要 视频 输入 的 实现 ， 这 个 

司 音 频 部 分 非常 类 似 。 另 外 就 是 将 调用 请 求 交 给 一 个 代理 类 来 完成 ， 

这 就 是 RtcVideoCaptureDelegate 类 。 下 面 的 就 比较 好 理解 了 ， 分 别 是 管 
理 类 VideoCaptureImplManager 和 视频 捕获 类 VideoCaptureImp1， 并 包括 
一 个 发 送 消息 到 Browser 进 程 的 辅助 类 。 在 Browser 进 程 使 用 控制 类 


VideoCaptureController 来 获取 VideoCaptureDevice ， 该 类 会 使 用 摄像 头 
等 视频 输入 设备 ， 效 果 都 相对 比较 简单 直观 。 


最 后 是 处 理 远 端 多 媒体 流 中 的 视频 解码 和 播放 功能 。 当 
MediaStreamImpl 对 象 接收 到 远 端 的 多 媒体 流 之 后 ， 它 会 使 用 WebRTC 
来 对 视频 数据 进行 解码 ， 因 为 可 以 使 用 硬件 来 解码 ， 所 以 提高 了 处 理 
的 性 能 。 


RTCVideoDecoderFac tory create RTCVideoDecoder 


+CreateV ideo Decoder( ) 


V, V 
cricket::WebRtcVideoDec webrtc::VideoDecoder 
odoracoy | Peo 
| | 


图 11-28 ”Chromium 处 理 远 端 视 频 基 础 设施 


把 WebRTC 整 个 过 程 综合 起 来 分 析 ， 可 以 有 一 种 更 为 整体 和 直观 
的 感受 ， 如 图 11-29 所 示 。 读 者 可 以 结合 这 个 图 来 回味 一 下 之 前 所 描述 
的 众多 细节 。 图 中 没有 本 地 捕获 的 音 视 频 的 播放 过 程 ， 因 为 它们 不 是 
DARA, MARES RATA, BERR RR. 
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图 11-29 ”WebKit、Chromium、1libjingle 和 WebRTC 等 项 目 支持 WebRTC 规 范 的 框架 


目前 ， 在 Chrome 浏 览 器 中 ， 基 于 WebRTC 的 网 页 已 经 可 以 在 移动 
操作 系统 (如 Android) 上 获得 支持 ， 移 动 领域 的 进展 必 将 推动 该 技术 
的 进一步 发 展 。 回 顾 本 章 介绍 的 多 媒体 各 个 方面 的 技术 ， 读 者 可 以 看 
出 ，HTML5 技 术 不 仅 引 入 了 多 媒体 的 支持 ， 而 且 加 入 了 之 前 插件 也 不 
能 支持 的 众多 更 新 更 复杂 的 技术 ， 但 是 却 极 大 提升 了 HTML5 的 应 用 范 
围 。 


第 12 章 ”安全 机 制 


安全 机 制 对 于 浏览 器 和 泻 染 引擎 来 说 至 关 重 要 。 一 个 不 考虑 安全 
机 制 的 HTML5 规 范 体系 肯定 不 会 受到 广泛 地 使 用 ， 同 时 一 个 不 安全 的 
浏览 器 也 不 会 得 到 广大 用 户 的 青睐 。 本 章 介 绍 的 安全 机 制 分 成 两 个 不 
同 的 部 分 ， 第 一 个 部 分 是 网 页 的 安全 ， 包 括 但 是 不 限于 网 页 数据 安全 
传输 、 跨 域 访问 、 用 户 数 据 安全 等 。 第 二 个 部 分 是 浏览 器 的 安全 ， 具 
体 是 指 虽然 网 页 或 者 JavaScript 代 码 有 一 些 安全 问题 或 者 存在 安全 漏 
洞 ， 浏 览 器 也 能 够 在 运行 它们 的 时 候 保证 自身 的 安全 ， 不 受到 攻击 从 
而 泄露 数据 或 者 使 系统 遭受 破坏 。 


12.1 网 页 安全 模型 
12.1.1 安全 模型 基础 


当 用 户 访 问 网 页 的 时 候 ， 浏 览 器 需要 确保 该 网 页 中 数据 的 安全 
性 ， 如 Cookie、 用 户 名 和 密码 等 信息 不 会 被 其 他 的 恶意 网 页 所 获取 。 
HTML5 定 义 了 一 系列 安全 机 制 来 保证 网 页 浏览 的 安全 性 ， 这 构成 了 网 
页 的 安全 模型 。 下 面 从 一 个 基础 概念 入 手 来 介绍 这 一 模型 。 


12.1.1.1 域 
在 安全 模型 的 定义 中 ， 域 (Origin) 这 个 概念 是 非常 重要 的 ， 它 


表示 的 是 网 页 所 在 的 域名 、 传 输 协 议和 端口 (Port) 等 信息 ， 域 是 表 
明 网 页 身份 的 重要 标识 。 例 如 一 个 网 页 


“http://blog.csdn.net/milado_nju”, ABA KIIRE “http://blog.csdn.net” , 
其 中 “http:” 是 协议 (Protocol) ，“blog.csdn.net* 是 域名 (Domain) , 
而 端口 是 默认 的 80。 读 者 打开 Chrome 浏 览 器 的 开发 者 工具 和 控制 从， 
输入 “window.location”， 就 可 以 看 到 如 图 12-1 所 示 关 于 域 的 各 种 信息 。 


funct ror bomstringlist 
code] 
E est=ab 
protocol: “http 
» reload: function reload() { [native code] } 
> replace: function () { [native code] } 
search: "?test=abc 
tost g: function toString() { [native code] } 
sof: function valueof()} { [mative code] } 
to__: Location 


12-1 PX 5i“http://blog.csdn.net/milado_nju” AY “window. location(s 


根据 安全 模型 的 定义 ， 不 同 域 中 网 页 间 的 资源 访问 是 受到 严格 限 
制 的 ， 也 就 是 网 页 的 DOM 对 象 、 个 人 数据 、XMLHttpRequest 等 需 
受到 控制 ， 默 认 情 况 下 ， 不 同 网 页 间 的 这 些 数据 是 被 浏览 器 隔离 的 ， 
不 能 互相 访问 ， 这 就 是 HTML 的 “Same origin Policy” 策 略 。 示 例 代 码 
12-1 是 一 个 访问 不 同 域 网 页 的 代码 示例 。 


该 段 代 码 是 一 个 简单 的 跨 域 访问 的 例子 ， 首 先 这 个 网 页 是 工作 在 
本 地 、 由 笔者 搭建 的 一 个 简单 http 服 务 器 之 上 ， 这 里 大 家 姑且 认为 这 
个 服务 器 的 域 是 “http://myweb.com:80”。 网 页 的 JavaScript 代 码 试图 访 
问 一 个 “iframe”? m A 中 的 TR, 也 就 是 
“aFrame.contentWindow.document”。 在 Chrome 浏 览 器 中 ， 当 执行 到 代 
码 “console.log(contentWin.documentb;” 的 时 候 ， 会 出 现 如 下 的 错误 ， 读 
者 可 以 在 控制 台中 找到 这 些 信息 。 


Uncaught SecurityError: Blocked a frame with origin 
"http://myweb.com" from accessing a frame with © origin 


"http://blog.csdn.net". Protocols, domains, and ports must match. 


这 段 错 误 信 息 的 含义 是 ， 一 个 在 域 “http://myweb.com” 网 页 中 的 
JavaScript 人 代码， 试图 访问 “http://blog.csdn.net” 域 中 网 页 的 对 象 ， 这 是 
不 被 允许 的 。 唯 一 允许 的 条 件 (后 面 有 其 他 机 制 也 可 以 辅助 实现 跨 域 
资源 共享 ) 是 这 两 个 网 页 在 同一 域 中 ， 根 据 规 范 的 定义 ， 当 且 仅 当 它 
们 的 协议 、 域 名 和 端口 号 都 相同 的 情况 下 ， 浏 览 器 才 会 允许 它们 之 间 
互相 访问 。 


示例 代码 12-1 ” 跨 域 访问 对 象 的 简单 代码 


<html> <body> 
<div>Cross origin 示例 </div> 
<iframe id="aframe" 
src="http://blog.csdn.net/milado_nju"></iframe> 
<script type="text/javascript"> 
window.onload = function () { 
var aFrame= document.getElementById("aframe" ); 
var contentWin = aFrame.contentWindow; 
console. log(contentWin.document ) ; 
} 
</script> 
</body> 
</html> 


为 什么 要 做 这 些 限 制 呢 ? 因为 不 同 域 之 间 的 安全 非常 重要 ， 信 息 
很 容易 泄露 ， 跨 域 (Cross Origin) 的 攻击 是 网 页 安全 最 主要 的 问题 之 


o 


12.1.1.2 XSS 


读者 可 以 回忆 一 下 ， 在 第 5 章 的 HTML 解 释 器 中 ， 笔 者 介绍 过 解释 
HTML 构 建 DOM 的 过 程 中 ，WebKit 使 用 一 个 叫做 XSSAuditor 的 类 来 做 
安全 方面 的 检查 ， 它 的 作用 是 防止 XSS 攻 击 ， 那 么 什么 是 XSS 呢 ? 


XSS 的 全 称 是 Cross Site Scripting， 其 含义 是 执行 跨 域 的 JavaScript 
脚本 代码 。 执 行 脚本 这 本 身 没什么 问题 。 但 是 ， 由 于 执行 其 他 域 的 脚 
本 代码 可 能 存在 严重 的 危害 ， 还 有 可 能 会 盗 取 当前 域 中 的 各 种 数据 。 
举 个 例子 ， 假 如 用 户 不 小 心 单 击 如 下 的 链接 “http:/myweb.comy/? 
<script>window.open("http://hac.ker.com/?secret=document.cookie") 
</script>”。 如 果 该 网 页 中 存在 漏洞 ， 这 段 网 址 的 输入 可 能 变 成 了 代码 
被 注入 网 页 中 ， 那 么 该 网 页 的 信息 将 会 被 传输 到 另外 一 个 域 中 去 ， 其 
中 主要 的 原因 是 浏览 器 将 用 户 的 数据 变 成 了 可 以 执行 的 代码 ， 解 决 上 
面 问题 的 一 个 典型 方法 就 是 不 信任 任何 来 自用 户 输入 的 数据 。 对 于 上 
面 的 例子 ， 可 以 使 用 字符 转换 ， 因 为 “< >” 等 字符 在 HIML 中 有 特殊 
的 含义 ， 表 示 的 是 元 素 ， 所 以 开发 者 将 用 户 输入 的 数据 进行 字符 转 
换 ， 那 就 是 将 “<” 转 换 成 <&lt;”，“>” 转 换 成 <&gt?” 等 ， 这 样 浏览 器 就 不 
会 将 它们 作为 代码 来 执行 。 


上 面 的 攻击 只 是 网 页 地 址 攻击 类 型 的 一 个 例子 ， 通 过 各 种 方式 和 
手段 ， 攻 击 者 可 能 利用 网 页 的 漏洞 来 获取 信息 ， 更 多 的 例子 读者 可 以 
参 考 如 网 页 


“https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet” H Ff 
列举 出 的 各 种 各 样 的 攻击 ， 其 危害 确实 很 大 。 


如 果 所 有 的 威胁 都 要 网 页 开发 者 想方设法 来 避免 ， 这 显然 是 不 现 
实 的 ， 因 为 很 难 让 所 有 开发 者 都 注意 到 这 些 攻击 行为 ， 而 且 攻 击 也 在 
不 停 地 演变 。 因 此 ， 在 HTML5 规 范 之 前 ， 跨 域 的 资源 共享 是 不 被 允许 
的 ， 既 然 没 有 能 力 分 辨 是 否 是 攻击 ， 那 就 阻止 它 ， 这 多 少 有 点 因 嘻 上 废 
食 的 感觉 。 为 此 ， 标 准 组 织 和 WebKit 使 用 了 大 量 的 技术 来 避免 各 种 攻 
击 的 发 生 。 例 如 ， 在 HTTP 消 息 尖 中 定义 了 一 个 名 为 “X-XS5- 
Protection” 的 字段 ， 此 时 ， 浏 览 器 会 打开 防止 XSS 攻 击 的 过 滤器 ， 目 前 
主要 的 浏览 器 都 支持 该 技术 ， 下 面 详细 介绍 这 些 相 关 的 技术 。 


12.1.1.3 CSP 


Content Security Policy 是 一 种 防止 XSS 攻 击 的 技术 ， 它 使 用 HTTP 
消息 头 来 指定 网 站 (或 者 网 页 ) 能 够 标注 哪些 域 中 的 哪些 类 型 的 资源 
被 允许 加 载 在 该 域 的 网 页 中 ， 包 括 JavaScript、CSS、HTML Frames, 
字体 、 图 片 和 内 入 对 象 《如 插件 、Java Applet 等 ) o 


在 HTTP 消 息 头 (如果 读者 不 熟悉 的 话 ， 建 议 查 阅 HTTP 消 息 头 规 
范 ) 中 ， 可 以 使 用 相应 的 字段 来 控制 这 些 域 和 资源 的 访问 ， 其 主要 是 
服务 器 返回 的 HTTP 消 息 头 。 目 前 ， 不 同 浏览 器 中 使 用 不 同 的 字段 名 来 
表示 ， 主 要 包含 三 种 名 称 : Content-Security-Policy (由 标准 组 织 定 
义 ， 目 前 最 新 的 Chrome 和 Firefox 版 本 都 支持 它 ) 、X-WebKit-CSP (X 
验 性 的 字段 名 ， 由 Chrome 和 其 他 基于 WebKit 的 浏览 器 使 用 ) 和 X- 
Content-Security-Policy (Firefox 所 使 用 ) o 该 字段 的 定义 格式 如 下 所 
小 o 


字段 名 : 指令 名 (directive) 指令 值 ; 指令 名 指令 值 ; .…..…. 


所 以 该 字段 就 是 包含 一 个 字段 名 及 一 系列 的 “指令 名 十 指令 值 ”对 
的 列表 。 其 中 指令 名 及 其 含义 如 表 12-1 所 示 ， 共 包括 11 种 类 型 的 指令 
来 控制 网 页 中 的 各 种 资源 和 安全 行为 。 


表 12-1 CSP 的 指令 名 和 功能 


含义 
控制 所 有 资产， 如果 已 经 包含 该 指定 资源 的 指 
令 ， 那 么 default-src 优 先 级 较 低 。 如 果 没 有 包 
含 该 措 定 的 指令 ， 那 么 使 用 default-src 指 令 定 
义 的 内 容 


script-src 用 于 控制 JavaScript 代 码 
style-src 用 于 控制 CSS 样 式 表 
img-src 用 于 控制 图 片 资产 


用 于 控制 XMLHttpRequest、 WebSocket 等 同 连 
connect-src os 
接 相关 


font-src 用 于 控制 字体 资源 


l 用 于 控制 “embed”、 “object”, “applet EmA 
object-src 


加 载 的 资源 


default-src 


| mediase -SITC 用 于 控制 多 媒体 资产， 包括 音 频 和 视频 


frame-src 用 于 控制 可 以 加 载 的 框 


用 于 控制 网 页 中 是 否 允 许 弹 出 对 话 框 ， 插 件 和 
脚本 的 执行 等 ， 值 可 能 是 “allow-forms”、 


“allow-same-origin”, “allow-scripts”, “allow- 


sandbox 


top-navigation” 


report-uri 将 错误 信息 发 送 到 指定 的 URI 


下 面 以 网 页 “http://content-security-policy.com/” 为 例 来 说 明 CSP 的 具 
体 表 示 形 式 。 图 12-2 是 使 用 Chrome 浏 览 器 浏览 该 网 页 所 获取 的 从 服务 
器 返回 的 HTTP 消 息 头 ， 图 中 包括 两 个 字段 ， 分 别 是 “X-Content- 
Security-Policy” 和 “X-WebKitrCSP”， 它 们 的 值 相同 ， 其 原因 主要 是 为 
了 兼容 各 种 浏览 


Connection: Keep-Alive 

Content-Type: text/html; charset=UTF-8 

Date: Sat, 26 Oct 2013 04:49:29 GMT 

Server: Apache 

Transfer-Encoding: chunked 

X-Content-Security-Policy: default-src 'self' www.google-analytics.com netdna. 
bootstrapcdn.com ajax.googleapis.com; object-src 'none'; media-src 'none'; 
frame-src ‘'none'; connect-src 'none'; 

X-WebKit-CSP: default-src 'self' www.google-analytics.com netdna.bootstrapcdn.com 


ajax.googleapis.com; object-src 'none'; media-src 'none'; frame-src 'none'; 


connect-src 'none'; 


图 12-2 ”网 页 “http:/content-security-policy.com/ 返 回 的 HTTP 消 息 头 


下 面 以 “X-Content-Security-Policy” 为 例 进行 说 明 ， 它 定义 了 
default-src， 该 字段 表明 如 果 没 有 具体 资源 类 型 的 定义 ， 它 允许 自身 的 


域 (Self) 、“www.google-analytics.com”、“netdna.bootstrapcdn.com” 和 


“ajax.googleapis.com”. 而 “object-src” 等 四 个 指令 不 能 加 载 任何 插件 、 
音 视频 资源 、 连 接 等 。 


为 了 说 明 浏 览 器 的 支持 情况 ， 该 网 页 和 网 站 特地 访问 了 一 些 违反 
上 面 定义 的 策略 以 便于 理解 。 下 面 是 该 网 页 运行 在 Chrome 时 报告 的 错 
误 之 一 ， 这 是 故意 演示 CSP 功 能 的 结果 。 


Refused to load the stylesheet ‘http://fonts.googleapis.com/css? 
family=Ubuntu' because it violates the following Content Security Policy 
directive: "default-src ‘self’ www.google-analytics.com 
netdna.bootstrapcdn.com ajax.googleapis.com". Note that 'style-src' was 


not explicitly set, so 'default-src' is used as a fallback. 


这 段 错误 消息 的 含义 是 一 个 样式 资源 被 阻止 。WebKit 处 理 的 过 程 
是 这 样 的 ， 首 先 查 找 是 否定 义 了 “style-src” 指 令 ， 如 图 12-2 中 所 示 ， 
CSP 并 没有 定义 该 指令 ， 所 以 使 用 “default-src”* 定 义 的 策略 ， 但 是 ， 该 
指令 中 并 没有 人 允许 该 域 中 的 资源 ， 所 以 它 被 Chrome 浏 览 器 拒绝 。 


12.1.1.4 CORS 


AR HE “Same Origin Policy” 原 则 ， 浏 览 器 做 了 很 多 的 限制 以 阻止 跨 
域 的 访问 ， 所 以 跨 域 的 资源 共享 又 变 成 了 一 个 问题 。 标 准 组 织 为 了 适 
应 现实 的 需要 ， 制 定 了 CORS (Cross Origin Resource Sharing) 规范 ， 
也 就 是 跨 域 资源 共享 ， 该 规范 也 是 借助 于 HTTP 消 息 头 并 通过 定义 了 一 

些 字段 来 实现 的 ， 主 要 是 定义 不 同 域 之 间 交 互 数据 的 方式 。 


当 某 个 网 页 希望 访问 其 他 域 资 源 的 时 候 ， 就 需要 按照 CORS 定 义 
的 标准 从 一 个 域 访 问 另 外 一 个 域 的 数据 。 比 如 一 个 网 站 


http:/myweb.com 和 希望 使 用 http:/blog.csdn.net 上 的 数据 ， 这 时 就 需要 用 
到 CORS。 


CORS 使 用 HTTP 消 息 头 来 描述 规范 定义 的 内 容 。 在 描述 使 用 
CORS 的 HTTP 消 息 头 之 前 ， 先 解释 一 下 什么 叫 简单 的 HTTP 消 息 头 ， 
HTTP 消 息 头 是 指 包 含有 限 个 字段 (如 Accept、Accept-language 等 ) 并 
且 请 求 类 型 只 是 HEAD、GET 和 POST。 通 常 简 单 的 HTTP 消 息 头 只 需 
要 较 小 的 代价 ， 而 包含 了 CORS 的 消息 头 却 不 是 简单 的 HTTP 消 息 头 ， 
该 消息 请 求 在 CROS 里 面 被 称 为 “Preflight” 消 息 请 求 。 


CORS 使 用 到 的 字段 名 和 功能 如 表 12-2 所 示 ， 其 类 型 可 以 分 成 请 求 
端 和 响应 端 两 种 。 如 果 每 个 HTTP 消 息 头 都 要 包含 这 些 字段 ， 那 么 绝对 
是 一 种 浪费 ， 因 为 没有 必要 每 个 HTTP 消 息 头 都 重复 包含 这 些 类 型 A 
此 ， 就 会 使 用 到 “Preflight” 请 求 来 发 送 包 含 CORS 字 段 的 消息 ， 而 其 他 
则 是 简单 的 HTTP 消 息 头 。 图 中 的 Access-Control-Max-Age 则 是 表示 
Prefight 请 求 的 有 效 期 ， 在 有 效 期 内 不 需要 重复 发 送 CORS 定 义 字 段 的 
消息 。 


表 12-2 ”CROS 规 范 定义 的 字段 名 


类 型 含义 
请 求 端 申明 该 请 求 来 产 于 哪个 
Origin Kim 
域 
Access-Control- = 请 求 端的 HTTP 请 求 类 型 ， 如 
AN iin 


1A 
Request-Method PUT, GET, HEAD 


Access-Control- Ta Uta 一 个 以 “,” 为 分 隔 符 的 列表 ， 表 
Request-Headers 项 是 自 定义 请 求 的 字段 


Access-Control- 表明 响应 端 允许 的 域 ， 可 以 指 
Allow-Origin 响应 端 定 特定 的 域 ， 也 可 以 使 用 “*” 表 
示人 允许 所 有 的 域 请 求 


认 情 况 Cookie 之 类 的 信息 是 不 能 
Access-Control- 二 够 共享 的 ， 但 是 如 果 设 置 该 字 
响应 端 要 
Allow-Credentials 段 为 真 ， 那 么 Cookie 是 可 以 传输 
给 请 求 端的 


Access-Control- 否 暴露 回复 消息 给 XHR， 以 便 

响应 端 a ~ RNAI ma 
Expose-Headers XHR 能 够 读 取 响 应 消息 的 内 容 
Access-Control- ci 、 areak 

响应 端 Prelight 请 求 的 有 效 时 间 
Max-Age 
n ee 应 端 允 许 的 HTTP 请 求 类 型 ， 如 

ccess-Control- zi ews sis 

Plo) DY À 前 面 所 述 的 PUT、GET、HEAD 

Allow-Methods 
= 

Access-Control- ah a 6 ae. 

响应 端 响应 端 支持 的 自 定义 字段 
Allow-Headers 


图 12-3 是 使 用 CORS 规 范 的 请 求 消息 头 和 响应 消息 头 ， 左 侧 是 请 
端的 消息 ， 右 侧 是 响应 端的 消息 ， 基 本 上 就 是 使 用 上 面 的 定义 ， 很 直 
观 并 易于 理解 。 


GET /cors HTTP/1.1 
Origin: http://myweb.com 


ccess-Control-Allow-Origin: http://myweb.com 
C ss-Control-Allow-Credentials: true 


Host: blog.csdn.net ccess-Control-Expose-Headers: false 
Accept-Language: en-US Content-Type: text/html; charset=utf-8 
Connection: keep-alive 


图 12-3 ”使 用 CORS 技 术 的 HTTP 消 息 头 


值得 注意 的 是 ， 读 者 不 要 把 CORS 和 CSP 混 淆 ， 它 们 规定 的 是 不 同 
领域 的 标准 ， 处 理 的 是 不 同 的 事情 。 其 主要 的 区 别 在 于 ，CSP 定 义 的 
网 页 自身 能 够 访问 的 某 些 域 和 资源 ， 而 CORS 定 义 的 是 一 个 网 页 如 
何 才 能 访问 被 同 源 策略 禁止 的 跨 域 资源 ， 规 定 了 两 者 交互 的 协议 和 方 
式 。 


12.1.1.5 Cross Document Messaging 


到 目前 为 止 ， 通 过 JavaScript 直 接 访问 其 他 域 网 页 的 DOM 结 构 问 题 
还 是 没 得 到 解决 ， 根 据 安全 要 求 ， 如 果 直 接 访问 且 不 受 限 ， 似 乎 不 是 
一 个 行 之 有 效 的 办 法 。 标 准 组 织 的 解决 之 道 是 引入 一 个 消息 传递 机 


制 ， 这 就 是 Cross Document Messagingo 


Cross Document Messaging 定 义 的 是 通过 window.postMessage 接 口 
让 JavaScript 在 不 同 域 的 文档 中 传递 消息 成 为 可 能 ， 示 例 代码 12-2 在 示 
例 代 码 12-1 之 后 ， 演 示 了 如 何 使 用 该 技术 来 传递 消息 。 


示例 代码 12-2 使 用 Cross Document Messaging 技 术 来 跨 域 文档 传输 
消息 


http://myweb.com#JavaScript{ti3: 


contentWin.postMessage(‘Hello’, ‘http://blog.csdn.net’ ); 


http://blog.csdn.net/milado_nju 网 页 中 JavaScript 代 码 (假如 可 以 的 
W) : 
window.addEventListener('message', function receiver(e) { 
if (e.origin == 'http://myweb.com') { 
if (e.data == 'Hello') { 
e.source.postMessage('Hello2', e.origin); 
} else { 


alert(e.data); 


} 
}, false); 


这 的 确 没 有 什么 深奥 的 地 方 ， 该 机 制 使 用 “window” 对 象 的 
postMessage 方 法 来 传递 给 其 他 域 网 页 消息 ， 该 方法 包含 两 个 参数 ， 第 
一 个 是 消息 内 容 ， 第 二 个 是 需要 对 方 的 域 信息 。 而 在 接收 方 ， 开 发 者 
在 JavaScript 代 码 中 注册 一 个 消息 响应 水 数 ， 如 示例 代码 12-2 所 示 ， 如 
果 检 查 出 消息 来 自 于 “http://myweb.com”， 那 么 就 回复 一 个 “hello2” 消 
息 ， 原 理 非 常 简单 。 


12.1.1.6 ”安全 传输 协议 


对 于 用 户 而 言 ， 网 页 的 安全 还 包含 一 个 重要 点 ， 那 就 是 用 户 和 服 
务 器 之 间 交 互 数 据 的 安全 性 问题 。 对 于 一 般 的 网 页 而 言 ， 这 些 数 据 的 
传输 都 是 使 用 明文 方式 ， 也 就 是 说 它们 对 谁 都 是 可 见 的 ， 这 能 够 满足 


大 多 数 的 使 用 情况 。 但 是 ， 对 于 隐私 的 数据 ， 如 密码 、 银 行 账号 信息 
等 ， 如 果 使 用 明文 来 传输 ， 那 是 非常 危险 的 。 为 此 ，Web 引 入 了 安全 
的 数据 传输 协议 ， 这 就 是 HTTPS。 


HTTPS 是 在 HTTP 协 议 之 上 使 用 SSL (Secure Socket Layer) 技术 
来 对 传输 的 数据 进行 加 密 ， 从 而 保证 了 数据 的 安全 性 。SSL 协 议 是 构 
建 在 TCP 协 议 之 上 、 应 用 层 协议 HTTP 之 下 的 。SSL 工 作 的 主要 流程 是 
先进 行 服务 器 认证 《认证 服务 器 是 安全 可 靠 的 ) ， 然 后 是 用 户 认 证 。 
SSL 协 议 主 要 是 服务 提供 商 对 用 户 信息 保密 的 承诺 ， 这 有 利于 提供 商 
而 不 利于 消费 者 。 同 时 SSL 还 存在 一 些 问题 ， 例 如 ， 只 能 提供 交易 中 
客户 与 服务 器 间 的 双方 认证 ， 在 涉及 多 方 的 电子 交易 中 ，SSL 协 议 并 
不 能 协调 各 方 间 的 安全 传输 和 信任 关系 。 


TLS (Transport Layer Security) 是 在 SSL3.0 基 础 之 上 发 展 起 来 
的 ， 它 使 用 了 新 的 加 密 算法 ， 所 以 它 同 HTTPS 之 间 并 不 兼容 。TLS 用 
于 两 个 通信 应 用 程序 之 间 ， 提 供 保密 性 和 数据 完整 性 ， 该 协议 是 由 两 
层 子 协议 组 成 的 ， 包 括 TLS 记 录 协 议 (TLS Record) 和 TLS 握 手 协议 
(TLS Handshake) 。 较 低 的 层 为 TLS 记 录 协 议 ， 位 于 TCP 协 议 之 上 。 


TLS 记 录 协 议 用 于 封装 各 种 高 层 协议 。 作 为 这 种 封装 协议 之 一 的 
握手 协议 允许 服务 器 与 客户 机 在 应 用 程序 协议 传输 和 接收 其 第 一 个 数 
据 字 节 前 彼此 认证 ， 协 商 加 密 算法 和 加 密 密 角 。 


TLS 握 手 协议 具有 三 个 属性 。 其 一 是 可 以 使 用 非 对 称 的 密码 术 来 
认证 对 等 方 的 身份 。 其 二 是 共享 加 密 密 钥 的 协商 是 安全 的 。 对 从 窃 
来 说 协商 加 密 是 难以 获得 的 。 此 外 经 过 认证 的 连接 不 能 获得 加 密 ， 即 
使 是 进入 连接 中 间 的 攻击 者 也 不 能 。 其 三 是 协商 是 可 靠 的 。 如 果 没 有 
经 过 通信 方 成 员 的 检测 ， 任 何 攻击 者 都 不 能 修改 通信 协商 。 


TLS 独 立 于 高 层 协议 ， 如 HTTP 协议 。 高 层 协 议 如 HITP 协 议 可 以 
透明 地 分 布 在 TLS 协 议 上 面 。 然 而 ，TLS 标 准 并 没有 规定 应 用 程序 如 
何在 TLS 上 增加 安全 性 ， 它 把 如 何 启 动 TLS 握 手 协议 及 如 何 解 释 交 换 
的 认证 证 书 的 决定 权 留 给 协议 的 设计 者 和 实施 者 来 判断 。 


读者 可 以 自己 回想 一 下 经 常 使 用 的 网 页 ， 如 果 涉 及 到 密码 和 银行 
账户 信息 ， 但 是 协议 却 不 是 HTTPS 的 话 ， 就 要 小 心 了 ， 因 为 可 能 你 的 
所 有 信息 都 暴露 在 大 庭 广 众 之 下 ， 盗 穷 者 随时 能 够 轻易 地 获取 这 些 信 
息 ， 现 在 就 去 检查 吧 。 


12.1.2 ”WebKit 的 实现 


上 面 一 次 性 介绍 了 域 的 概念 、XSS、CSP 规 范 和 CORS 规 范 等 
HTML5 为 了 保证 网 页 安全 性 引入 的 一 系列 技术 。 这 些 新 技术 未 必 在 所 
有 的 泻 染 引擎 中 得 到 支持 ， 但 是 webKit 已 经 提供 了 对 它们 的 支持 ， 下 


面 将 一 一 介绍 。 


首先 是 WebKit 为 了 防止 XSS 攻 击 所 做 的 努力 。 图 12-4 是 WebKit 中 
启动 XSS 过 滤 功能 所 使 用 的 相关 基础 设施 。 为 了 防止 XSS 攻 击 ， 需 要 
在 解释 HTML 的 过 程 中 进行 XSS 过 滤 ， 也 就 是 对 词法 分 析 器 分 析 之 后 
的 词语 (Token) 进行 过 滤 ， 以 发 现 潜 在 的 问题 。 


HTMLDocumentParser 


+pump Tokenizer() 


XSSAuditorDelegate 


-m_reportURL 


XSSAuditor 


-m_xssProtection 
+filterToken() +didBlockScript() 
| i 


generate \ı 1, USe 


-m_didBlockEntirePage 


-m_didSendXSSProtectionHeader 
-m_didSendCSPHeader 


图 12-4 ”WebKit 中 XSS 过 滤 功能 的 相关 类 及 其 关系 


基本 的 工作 过 程 是 这 样 的 ， 在 HTMILDocumentParser 类 解释 出 一 个 
词语 之 后 ， 如 果 需 要 进行 XSS 过 滤 功 能 (这 是 默认 打开 的 ， 当 然 也 可 
以 强制 关闭 ) ， 则 每 一 个 词语 使 用 HIMLDocumentParser 类 的 
XSSAuditor 对 象 来 进行 过 滤 ， 也 就 是 图 中 的 XSSAuditor::filterToken 函 
数 ， 对 于 每 一 个 词语 ， 该 水 数 进行 过 滤 并 生成 相应 的 结果 XSSInfo 对 
象 ， 该 对 象 包含 是 否 需 要 阻止 整个 页 面 泻 染 等 信息 。XSSAuditor 不 做 
决定 ， 而 是 由 HIMLDocumentParser 将 这 些 信 息 交 给 
XSSAuditorDelegate 类 来 处 理 ， 再 根据 这 些 信息 来 生成 报告 ， 
XSSAuditorDelegate 将 结果 报告 发 送 给 "report-uri”， 前 面 提 到 过 该 字段 


“report-uri”o 


那么 filterToken 中 具体 做 什么 事情 呢 ? XSS 有 很 多 种 攻击 的 类 型 ， 
这 里 主要 包括 对 于 元 素 开 始 和 结束 及 其 属性 的 检查 ， 同 时 对 于 一 些 特 


定 类 型 的 词语 进行 过 滤 ， 包 括 input、form、button，iframe、script 等 。 
当 发 现 潜 在 危险 的 时 候 ， 再 生成 相应 的 结果 信息 也 就 是 XSSInfo 对 象 。 


其 次 是 CSP 方 面 的 支持 。 图 12-5 是 WebKit 支 持 CSP 所 定义 的 相关 基 
础 设施 ， 同 时 包括 Origin 的 定义 。 其 中 ， 对 于 CSP 支 持 的 主要 部 分 是 


ContentSecurityPolicy 和 SecurityContext 这 两 个 类 。 


SecurityContext ContentSecurityPolicy 
-m_securityOrigin < -m_policies 
-m_contentSecurityPolicy +didReceiveHeader() 

O JA +addPolicyFromHeaderValue() 
A 


ScriptExecutionContext L 
ResourceFetcher 
+canFetch() 
+addAdditionalR tHead 
SecurityOrigin al (cane Request eaters) 


1 
$ 


SecurityPolicy 
= Document +generateReferrerHeader() 
Private +processHttpEquivContentSecurityPolicy() +addOriginAccessWhitelistEntry() 


a 


=o WebSecurityPolicy 


+protocol() +add OriginAccessW hitelistEntry() 


图 12-5 “WebKit 的 Origin 定 义 和 支 持 CSP 的 基础 设施 


e ContentSecurityPolicy: 主要 包括 对 于 规范 中 定义 的 各 个 字段 的 
解释 和 解释 后 内 容 的 保存 ， 如 图 中 的 didReceiveHeader 卫 数 就 是 处 
理 服务 器 端的 HTTP 消 息 头 。 该 类 将 指令 和 指令 的 内 容 保 存在 
‘m_policies” 中 ， 形 成 一 个 列表 。 

e SecurityContext : 支持 安全 机 制 的 上 下 文 类 ， ee TO 
和 ContentSecurityPolicy 对 象 ， 其 他 对 CSP 等 的 调用 都 是 通过 该 类 
来 获取 的 。 


下 面 看 图 12-5 中 最 下 部 分 ， 又 是 两 个 类 WebSecurityOrigin 和 
WebSecurityPolicy， 这 是 webKit 的 Chromium 移 植 定义 的 两 个 接口 类 ， 
可 以 被 Chromium i A. EAA A ARARA, AADAE 
SecurityOrigin 和 SecurityPolicy。 SecurityOrigin 就 是 规 沁 中 对 于 Origin 的 
定义 。 而 SecurityPolicy 就 是 对 CSP 策 略 的 定义 ， 通 过 WebSecurityPolicy 
接口 ，Chromium 可 以 自 定义 一 些 策略 并 设置 到 WebKit 中 。 


图 12-5 中 间 部 分 虽然 类 比较 多 ， 但 并 不 是 很 复杂 。 相 信 大 家 对 
Document 类 非常 熟悉 了 ， 它 间接 地 继承 了 SecurityContext 〈 略 过 图 中 
的 ScriptExecutionContext 类 ， 对 于 介绍 安全 机 制 没有 什么 帮助 ) ， 自 
然 Document 也 继承 了 CSP 的 设置 ， 因 为 Document 会 在 各 处 被 使 用 ， 所 
以 这 样 很 方便 调用 CSP 的 功能 。DOMSecurityPolicy 是 为 了 将 CSP 的 信 
息 暴 露 到 JavaScript 代 码 中 ， 这 样 JavaScript 代 码 可 以 获取 CSP 定 义 的 内 
容 ， 如 “script-src” 指 令 所 定义 的 允许 访问 的 域 。ResourceFetcher 是 获取 
资源 的 类 E 对 于 各 种 类 型 的 资源 ， 在 获取 之 前 都 需 
要 检查 该 资源 是 否 在 CSP 定 义 的 允许 范围 内 ， 如 果 不 在 ， 则 拒绝 请 
K, FF 告 错误 。 如 果 在 ， 则 发 起 请 求 ， 该 请 求 需 要 依赖 
SecurityPolicy 提 供 的 一 些 信息 。 如 此 ，CSP 规 范 所 定义 的 功能 就 被 完 
整 支持 了 。 


最 后 是 CORS 的 支持 ， 图 12-6 是 WebKit 支 持 CORS 所 涉及 的 一 些 
类 。 其 中 最 主要 的 是 CrossOriginAccessControl 部 分 。 它 不 是 一 个 类 ， 
里 面 只 是 包含 了 一 组 全 局 水 数 ， 用 来 帮助 生成 符合 CORS 规 范 的 
“Preflight” 请 求 或 者 其 他 简单 请 求 ， 同 时 包括 处 理 来 自 回 复 端 的 消息 。 
在 WebKit 使 用 WebURLLoader 请 求 的 时 候 ， 使 用 这 些 方 法 就 能 够 生成 
相应 的 请 求 。 


DocumentThreadableL oader CrossOriginAccessControl 


+makeCrossOriginAccessRequest() +createAcces sControlPreflightRequest(} 


+passesAccessControlCheck(} 
+passesPreflightStatusCheck()} 
+parseAccessControlExposeHeadersAllowList() 


AssociatedURLLoader 


+loadAsynchronously() 


Vv 
WebURLLoader 


图 12-6 ” WebKit 支持 CORS 规 范 的 基础 设施 


12.2 WHARE 
12.2.1 原理 


一 般 而 言 ， 对 于 网 络 上 的 网 页 中 的 JavaScript 代 码 和 插件 是 不 受信 
的 (除非 是 经 过 认证 的 网 站 ) ， 特 别 是 一 些 故意 设计 侵入 浏览 器 运行 
的 主机 代码 更 是 非常 危险 ， 通 过 一 些 手段 或 者 浏览 器 中 的 漏洞 ， 这 些 
代码 可 能 获取 了 主机 的 管理 权限 ， 这 对 主机 系统 来 说 是 非常 危险 的 。 
所 以 ， 除 了 保证 网 页 本 身 之 外 ， 还 需要 保证 浏览 器 和 浏览 器 所 在 的 系 
统 不 存在 危险 。 


对 于 网 络 上 的 网 页 ， 浏 览 器 认为 它们 是 不 安全 的 ， 因 为 网 页 总 是 
存在 各 种 可 能 性 ， 也 许 是 无 意 的 或 有 意 的 攻击 。 如 果 有 一 种 机 制 ， 将 
网 页 的 运行 限制 在 一 个 特定 的 环境 中 ， 也 就 是 一 个 阔 箱 中 ， 使 它 只 能 
a 
够 获取 泻 染 引擎 工作 的 主机 系统 中 的 任何 权限 ， 这 一 思想 就 是 阔 箱 模 
型 。 


WebKit 中 并 没有 提供 沙 箱 机 制 的 支持 ， 所 以 后 面 的 介绍 主要 以 
Chromium 为 基础 来 介绍 在 多 进程 架构 中 ， 沙 箱 模 型 的 实现 方式 。 


Chromium 是 以 多 进程 为 基础 的 ， 网 页 的 泻 染 在 一 个 独立 的 
Renderer 进 程 中 进行 ， 这 为 实现 沙 箱 模型 提供 了 基础 ， 因 为 可 以 相对 
容易 地 使 用 一 些 技术 将 整个 网 页 的 泻 染 过 程 放 在 一 个 受 限 的 进程 中 来 
完成 ， 如 图 12-7 所 示 ， 受 限 环境 只 能 被 某 些 或 者 很 少 的 系统 调用 而 且 
不 能 直接 访问 用 户 数据 。 而 阔 箱 模 型 工作 的 基本 单位 就 是 进程 。 


操作 系统 


图 12-7 ”使 用 沙 箱 模型 的 泻 染 引擎 的 示意 图 


Chromium 的 阔 箱 模型 是 利用 系统 提供 的 安全 技术 ， 让 网 页 在 执行 
过 程 中 不 会 修改 操作 系统 或 者 是 访问 系统 中 的 隐私 数据 ， 而 需要 访问 
系统 资源 或 者 说 是 系统 调用 的 时 候 ， 通 过 一 个 代理 机 制 来 完成 。 下 面 
详细 介绍 沙 箱 模型 的 实现 方式 和 工作 原理 。 


12.2.2 ”实现 机 制 


因为 沙 箱 模 型 严重 依赖 操作 系统 提供 的 技术 ， 而 不 同 操作 系统 提 
供 的 安全 技术 是 不 一 样 的 ， 这 样 也 就 意味 着 不 同 操作 系统 上 的 实现 是 
不 一 致 的 ， 需 要 分 别针 对 不 同 平台 展开 来 讨论 。 不 过 ， 不 管 是 Linux 还 
是 windows， 或 者 是 其 他 平台 ，Chromium 都 是 在 进程 的 粒度 下 来 实现 
阔 箱 模型 ， 也 就 是 说 需要 运行 在 阔 箱 下 的 操作 都 在 一 个 单独 的 进程 
中 。 所 以 ， 对 于 使 用 阔 箱 模 型 至 少 需 要 两 个 进程 ， 如 图 12-8 所 示 。 


代理 进程 


图 12-8 ”应 用 沙 箱 模型 的 进程 模型 


图 中 右 侧 的 是 目标 进程 ， 也 就 是 需要 在 阔 箱 中 运行 的 代码 ， 左 侧 
的 是 代理 进程 ， 它 需要 负责 创建 目标 进程 并 为 目标 进程 设置 各 种 安全 
策略 ， 同 时 建立 IPC 连 接 ， 接 受 目标 进程 的 各 种 请 求 ， 因 为 目标 进程 
是 不 能 访问 过 多 资源 的 。 下 面 主 要 讨论 Linux 和 Windows 平 台 上 沙 箱 模 
型 的 实现 和 涉及 的 技术 。 


12.2.2.1 Linux 


在 Linux 上 ， 阔 箱 模型 分 成 两 个 层 ， 第 一 层 是 阻止 某 个 或 者 某 些 进 
程 通常 能 够 访问 的 资源 ，Chromium 中 称 为 “语义 层 ”， 这 里 使 用 的 系统 


技术 主要 是 “setuid”， 详 情 稍 后 介绍 。 第 二 层 是 防止 进程 访问 能 够 攻击 
内 核 的 接口 或 者 攻击 面 (Attack Surface， 这 里 主要 是 内 核 可 能 会 被 未 
授权 的 用 户 调 用 ) ， 这 里 使 用 的 系统 技术 主要 是 “Seccomp”( 具 体 到 
这 里 是 Seccomp-BPF， 它 是 Seccomp 的 一 个 扩展 ) o 


在 讨论 具体 的 两 层 实现 和 相关 技术 之 前 ， 笔 者 这 里 先 介 绍 一 下 如 
何在 Linux 系 统 中 编译 和 启动 沙 箱 机 制 。 在 Linux 系 统 上 ， 读 者 如 果 想 
尝试 启用 Chromium 的 阔 箱 机 制 ， 需 要 按照 以 下 三 个 步 又 来 进行 : 第 
一 ， 先 单独 编译 目标 “chrome sandbox”， 它 是 独立 于 编译 目标 
“chrome” 的 ， 所 以 在 编译 “chrome” 目 标的 时 候 并 不 会 编译 
“chrome_sandbox”; 第 二 ， 运 行 脚本 “build/update-linux-sandbox.sh”， 
它 会 将 编译 完 的 文件 安装 到 合适 的 位 置 ; 第 三 ， 在 “.bashrc” 中 假如 
“export CHROME_DEVEL_SANDBOX=/usr/local/sbin/chrome-devel- 
sandbox” 即 可 。 这 样 ，Chromium 浏 览 器 就 能 够 使 用 沙 箱 机 制 了 。 


启动 沙 箱 机 制 之 后 ， 如 果 运 行 Chromium 程 序 ， 读 者 就 可 以 看 出 如 
12-9 所 给 出 的 进程 层次 结构 树 。 这 是 一 棵 树 结构 ， 树 的 根 节点 就 是 
“browser” 进 程 ， 该 进程 启动 后 ， 会 孵化 出 多 个 子 进程 ， 包 括 图 中 的 
“GPU”, “chrome_sandbox” 等 进程 。 而 对 于 沙 箱 模型 来 说 ， 这 里 主要 
关注 “chrome_sandbox” 进 程 ， 它 的 目的 主要 是 使 用 “setuid” 技 术 来 实现 
模型 的 第 一 层 ， 生 成 了 “zygote” 子 进程 。 其 中 “chrome_sandbox” 进 程 使 
用 的 是 上 面 介绍 的 目标 “chrome_sandbox” 生 成 的 二 进 制 可 执行 文件 ， 
而 其 他 的 是 目标 “chrome” 生 成 的 结果 ， 二 者 是 不 一 样 的 。 


Browser 


sandbox 


图 12-9 ”使 用 阔 箱 机 制 后 的 进程 和 进程 层次 树 


生成 第 一 个 “zygote” 之 后 ， 该 进程 会 生成 两 个 子 进程 ， 第 一 个 是 
“nacl-helper” 进 程 ， 是 为 了 支持 NaCl 插 件 进程 服务 的 。 第 二 个 又 是 一 个 
“zygote”， 这 个 不 同 于 它 的 父亲 ， 它 主要 是 为 了 生成 各 种 “Renderer” 进 
程 服务 。 这 样 ， 每 个 “Renderer” 进 程 经 过 上 面 的 过 程 后 都 会 使 用 阔 箱 
机 制 进 行 处 理 ， 网 页 在 “Renderer” 中 的 运行 就 受到 了 严格 地 限制 。 


读者 可 能 疑惑 ， 既 然 “Renderer” 进 程 根本 不 能 访问 各 种 资源 ， 也 
不 能 调用 各 种 系统 调用 ， 那 么 需要 使 用 一 些 功能 怎么 办 呢 (如 访问 文 
件 系 统 ) ? 答案 是 使 用 一 个 代理 来 完成 ， 代 理 进程 和 这 些 “Renderer” 
进程 之 间 通 过 进程 间 通 信 机 制 来 交互 ， 所 有 的 请 求 都 发 送 给 代理 进 
程 ， 代 理 进程 将 结果 返回 给 “Renderer” 进 程 ， 这 里 的 代理 进程 就 是 
“Browser” 进 程 ，“Browser” 进 程 拥 有 访问 这 些 资 源 和 系统 调用 的 权 
限 。 


首先 讨论 一 下 第 一 层 是 如 何 支 持 的 ， 其 中 主要 使 用 两 种 技术 。 


使 用 “setuid” 来 为 新 进程 设置 新 用 户 ID 和 组 ID ， 根 据 Linux 的 规 
定 ， 两 个 不 同 用 户 记 之 间 的 数据 是 隔离 开 的 ， 这 自然 将 
“Renderer” 进 程 同 “Browser” 进 程 分 开 ， 后 者 拥有 访问 很 多 关键 数 
据 的 能 力 ， 如 各 个 网 页 的 Cookie。 在 现在 的 Chromium 实 现 中 ， 不 
再 使 用 “setuid” 来 实现 ， 而 是 使 用 “CLONE_NEWPID” 标 记 ， 该 标 
记 是 在 Linux 系 统 调 用 “clone” 时 设置 ， 从 而 为 新 进程 创建 一 个 新 的 
名 空间 ， 也 就 是 上 面 描述 的 文件 系统 等 。 

限制 网 络 访问 ，Chromium 使 用 标记 “CLONE_NEWNET” 设 置 在 调 
用 “clone” 系 统 调 用 的 参数 中 。 使 用 了 这 些 扩 术 之 后 ， 克 隆 出 来 的 
进程 就 同 父 进程 分 离开 来 ， 包 括 新 文件 系统 (类 似 于 chroot) 等 
和 限制 网 络 的 访问 等 。 


接 下 来 是 第 二 层 的 讨论 ， 这 里 使 用 的 主要 技术 是 “Seccomp” 和 
“Seccomp-BPF”。 Seccomp 是 Linux 内 核 提 供 的 一 种 简单 的 沙 箱 机 制 | ， 
它 能 够 允许 进程 进入 一 种 不 可 逆 的 安全 状态 ， 进 入 该 状态 的 进程 只 能 
够 调用 4 个 系统 调用 ， 包 插 “exit"、“sigreturn”、“read” 和 “write”， 而 且 
最 后 两 个 系统 调用 只 能 操作 已 经 打开 的 文件 描述 符 。 如 果 该 进程 尝试 
调用 其 他 的 系统 调用 ， 那 么 内 核 会 通过 “SIGKILL” 信 号 来 杀 死 该 进 
程 。 进 入 该 安全 状态 的 方法 就 是 使 用 系统 调用 prctl 设 置 标记 位 
PR_SET_SECCOMP 就 可 以 了 ， 前 提 是 系统 的 内 核 在 编译 的 时 候 就 加 
入 了 对 “Seccomp” 的 支持 ， 这 一 点 很 重要 ， 因 为 不 是 所 有 使 用 Linux 内 
核 的 操作 系统 都 能 打开 该 机 制 。 


“Seccomp-BPF” 是 “Seccomp” 技 术 的 一 个 扩展 ， 它 允许 使 用 BPF 所 
定义 的 方法 来 将 系统 调用 转变 成 BPF 格 式 的 小 程序 。BPF (Berkeley 
Packet Filter) 原 是 Berkeley 开 发 的 一 种 用 来 过 滤 网 络 包 的 技术 ， 现 在 


被 应 用 在 “Seccomp”。“Seccomp-BPF” 将 系统 调用 转变 成 BPF 格 式 的 小 
程序 ， 这 些小 程序 能 够 被 内 核 所 解释 ， 这 样 每 个 系统 调用 的 次 数 和 参 
数 都 能 够 被 重新 评估 或 者 被 限制 。 


对 于 开发 者 来 说 ， 如 果 想 要 关闭 第 二 层 的 阔 箱 技 术 也 很 简单 ， 在 
命令 行 中 加 入 参数 “--disable-seccomp-filter-sandbox” 就 可 以 了 。 


以 上 的 技术 不 仅 应 用 在 Linux 系统 之 上 ， 而 且 也 被 应 用 在 
ChromeOS 中 。 过 去 还 有 些 技术 用 来 实现 第 一 层 和 第 二 层 ， 如 
SELinux，Seccomp-legacy， 因 为 上 面 介 绍 的 技术 更 加 合适 ， 所 以 现在 
它们 已 经 被 丢弃 了 。 


对 于 Android 系 统 来 讲 ， 虽 然 Android 是 基于 Linux 内 核 开 发 出 来 
的 ， 但 还 是 有 些 区 别 的 。 目 前 阔 箱 机 制 的 第 二 层 在 Android 上 并 没有 得 
到 支持 ， 只 是 第 一 层 得 到 了 支持 。 但 是 ， 在 Android 上 ， 系 统 支持 的 安 
全 机 制 都 已 经 在 Chrome 的 Android 版 上 得 到 了 启用 ， 主 要 体现 在 两 个 
方面 ， 第 一 是 SUID，Android 系 统 上 稍微 有 些 不 同 ， 它 是 UID isolation 

(UID 隔 离 技 术 ) ，Android 可 以 为 每 一 个 进程 设置 一 个 新 的 UID X 
样 每 个 进程 之 间 就 不 能 随意 修改 和 访问 数据 ， 这 是 有 Linux 内 核 机 制 | 来 
保证 的 ， 其 实 是 上 面 讨论 的 阔 箱 机 制 的 第 一 层 。 第 二 是 Android 的 权限 
机 制 ， 每 个 进程 只 能 访问 授权 的 权限 列表 中 的 数据 ， 如 地 理 位 置信 
息 、 通 讯 录 等 ， 这 个 是 用 户 数据 的 隐私 管理 ， 不 在 Chromium 的 阔 箱 机 
制 沁 围 内 ， 这 里 不 再 讨论 。 


12.2.2.2 Windows 


Windows 的 沙 箱 模 型 也 是 基于 图 12-8 的 多 进程 结构 ， 不 同 于 Linux 
的 是 它们 依赖 的 操作 系统 的 安全 机 制 不 同 ， 在 Windows 系 统 中 ， 阔 箱 
模型 依赖 于 三 个 方面 的 技术 : She (Token) 、Windows Job 对 象 和 
Windows Desktop 对 象 。 


在 Windows 中 ， 令 牌 是 进程 访问 资源 的 证 件 ， 每 个 进程 都 有 一 个 
令 牌 ， 令 牌 里 面包 含 了 一 个 SID 和 多 个 组 的 SID。 而 对 于 资源 来 说 ， 每 
个 资源 都 包含 一 个 安全 描述 符 ， 里 面包 含 了 一 个 列表 称 为 ACL 

(Access control list) ， 表 中 的 每 个 项 ACE 标 记 了 一 个 访问 规则 ， 描 述 
了 SID 是 否 允 许 访 问 、 读 写 、 执 行 等 操作 。Chromium 为 Renderer 进 程 
设置 了 极为 严格 的 令 牌 ， 如 下 面 所 示 。 


Regular Groups 

Logon SID : mandatory 

All other SIDs : deny only, mandatory 
Restricted Groups 

S-1-0-0 : mandatory 
Privileges 


None 


使 用 了 上 面 设 置 的 令 牌 ， 读 者 基本 上 找 不 到 一 个 windows 上 的 资 
源 可 以 访问 ， 这 一 令 牌 就 是 沙 箱 模 型 在 Windows 上 使 用 的 令 牌 。 但 
是 ， 由 于 Windows 认 为 网 络 和 系统 的 磁盘 卷 不 是 一 个 安全 问题 ， 这 也 
就 是 意味 着 Renderer 进 程 或 者 其 他 目标 进程 仍然 能 够 发 送 和 接收 网 络 
消息 ， 读 写 磁 盘 卷 信息 。 


但 是 ， 令 牌 还 是 不 能 够 对 某 些 方面 做 出 限制 的 ， 所 以 接 下 来 介绍 
的 是 windows 的 Job 对 象 。 当 一 个 进程 运行 在 Job 对 象 中 的 时 候 ， 更 多 
方面 受到 了 限制 。 


禁止 进程 通过 系统 调用 “SystemParametersInfo” 修 改 系统 设置 ， 如 
设置 屏保 时 间 和 鼠标 左右 键 设置 等 ， 禁 止 进程 创建 更 多 桌面 或 在 不 同 
桌面 间 来 回 切 换 等 ， 禁 止 读 写 剪 切 板 ， 茜 止 修改 屏幕 分 辨 率 等 相关 设 
Ho 


还 有 非常 多 的 功能 可 以 通过 Job 对 象 被 禁止 ， 更 多 的 详情 请 读者 查 
阅 “http://www.chromium.org/developers/design-documents/sandbox” 来 了 
解 。 不 仅 如 此 ，Job 对 象 还 能 够 防止 对 CPU、 内 存 和 IO 等 资源 的 无 限制 
使 用 。 


最 后 是 使 用 Windows 的 “Desktop” 对 象 来 为 所 有 Renderer 进 程 (或 
者 其 他 进程 如 NaCl) 构建 一 个 新 桌面 。 因 为 在 桌面 内 发 送 或 者 接收 消 
息 是 允许 的 ， 而 且 没 有 受到 任何 安全 策略 的 限制 。Chromium 为 了 阻止 
这 种 事情 的 发 生 ， 为 所 有 的 目标 进程 创建 一 个 新 桌面 ， 这 也 意味 这 这 
些 目标 进程 没有 办 法 向 其 他 桌面 的 进程 任意 发 送 消息 。 


在 Windows Vista 上 ， 还 需要 使 用 完整 性 级 别 (Integrity Levels) , 
它 规定 了 5 种 资源 访问 的 级 别 ， 包 括 untrusted、low、medium、high 和 
system ， 这 个 级 别 依次 从 低 到 高 。 如 果 一 个 资源 的 访问 级 别 高 于 令 牌 
访问 的 级 别 ， 那 也 会 被 禁止 。 


从 上 面 的 讨论 可 以 看 出 ，Chromium 引 入 的 沙 箱 机 制 极 大 地 降低 了 
网 页 中 各 种 破坏 操作 系统 的 潜在 风险 ， 将 网 页 的 执行 置 于 一 个 孤立 
(Isolated) 和 受 限制 (Strict) 的 环境 中 。 安 全 问题 始终 是 一 个 重要 议 


题 ， 笔 者 认为 ， 这 必 将 是 浏览 器 或 者 Web 运 行 环境 中 的 一 个 发 展 方 
Ho 


第 13 章 ”移动 WebKit 


移动 领域 对 HTML5 的 发 展 起 了 非常 重要 的 作用 ， 特 别 是 在 著名 的 
Flash 和 HTML5 之 争 事件 后 ，HTML5 标 准 得 到 了 几乎 所 有 智能 移动 设 
备 的 支持 ， 这 一 情况 甚至 要 好 于 桌面 设备 。 伴 随 着 移动 领域 的 众多 创 
新 ， 标 准 化 组 织 也 将 这 些 新 功能 带 入 了 Web 领 域 ， 如 对 各 种 屏幕 的 支 
持 ， 触 控 (Touch) . =A (Gesture) 和 一 些 新 设备 能 力 接口 等 。 移 
动 化 已 经 成 为 HTML5 重 要 的 发 展 方向 ， 这 一 章 将 和 各 位 读者 一 起 探讨 
移动 领域 的 技术 和 WebKit 是 如 何 走 在 时 代 的 前 沿 去 支持 和 推动 这 一 趋 
势 的 。 


13.1 触 控 和 手势 事件 


13.1.1 HTMIL5 规 范 


随 着 电容 屏幕 的 流行 ， 触 控 操 作 变 得 前 所 未 有 的 流行 起 来 。 时 至 
今日 ， 融 有 多 扣 触 控 功 能 已 经 成 为 了 移动 设备 的 标准 配置 ， 基 于 触 控 
的 手势 识别 技术 也 获得 巨大 的 发 展 ， 如 使 用 两 个 手指 来 缩放 应 用 的 大 
小 等 。 所 以 ， 在 移动 系统 中 ， 编 程 需要 考虑 的 不 是 鼠标 事件 ， 而 是 触 
控 和 手势 事件 ， 这 些 事件 对 于 改善 用 户 体 验 起 了 非常 大 的 作用 。 最 早 
将 触 控 和 手势 事件 引入 Web 领 域 的 是 苹果 公司 ， 它 在 iOS2.0 中 加 入 了 
这 种 支持 ， 随 后 Android 系 统 也 加 入 了 这 一 阵营 。 


在 介绍 规范 之 前 ， 有 必要 先 理 解 一 下 触 控 、 手 势 事件 与 浏览 器 默 
认 行 为 的 关系。 图 13-1 撞 述 了 处 理 触 控 事件 的 可 能 情况 ， 图 中 灰色 圆 
圈 表 示 的 是 一 个 触 控 点 ， 当 它 向 上 移动 的 时 候 ， 浏 览 器 已 面临 艰难 选 


择 ， 对 于 用 尸 触 发 的 触 控 事件 ， 可 能 有 两 个 地 方 需要 使 用 到 触 控 事 
件 : 第 一 是 浏览 器 本 身 ， 浏 览 器 可 能 希望 利用 这 个 事件 完成 翻 页 动 
作 ; 另外 一 方面 ， 该 灰色 圆圈 的 部 分 所 对 应 的 元 素 可 能 需要 由 自己 来 
处 理 这 些 触 控 事件 ， 而 不 是 浏览 器 来 处 理 。 浏 览 器 或 者 WebKit 的 具体 
处 理 远 辑 我 们 在 稍 后 会 介绍 到 。 


l NOOS EPEA > 情况 1: 浏览 器 翻 页 
— Se 情况 2: JavaScript 接收 触 控 事 件 


网 页 


(JavaScript 代码 、HTML 等 ) 


图 13-1 浏览 器 处 理 的 触 控 事件 


目前 ，Web 领 域 引 入 两 种 与 触 控 相关 的 技术 ， 其 一 是 HTML5 
Touch Events， 它 基本 上 已 经 成 为 了 规范 ， 得 到 了 众多 泻 染 引擎 和 浏览 
器 的 支持 和 认可 。 其 二 是 Gesture Events， 它 是 苹果 公司 设计 并 在 Safari 
浏览 器 中 实现 的 ， 但 是 没有 得 到 其 他 更 多 浏览 器 的 支持 。 下 面 分 别 来 
分 析 这 两 者 。 


首先 是 HTML5 Touch Events， 它 已 经 成 为 推荐 的 规范 ， 而 且 事 实 
上 也 得 到 了 两 家 主流 移动 操作 系统 中 浏览 器 的 支持 ， 可 以 说 发 展 得 非 
常 好 ， 该 标准 主要 是 定义 如 何 将 原始 的 触 控 事件 以 特定 的 方式 传递 给 
JavaScript 引 擎 ， 然 后 再 传递 给 注册 的 事件 响应 函数 。 这 一 规范 在 
HTML5 网 页 应 用 中 已 经 比较 成 熟 ， 网 页 开发 者 可 以 根据 规范 进行 定 
义 ， 其 中 最 主要 的 接口 是 TouchEvent， 定 义 在 图 13-2 中 上 半 部 分 ， 表 
示 一 次 传递 给 JavaSscript 注 册 函 数 的 事件 。 


interface TouchkE 


readonl 


hb; 


// TouchList 是 


interface Touch 


readonl 


readonl 
readonl 
readonl 
readonl 


readonl 


readonl 


readonl 
readonl 
readonl 
readonl 
readonl 
readonl 


readonl 


y 


y 
y 
SA 
y 
y 
y 


y 


{ 


te bool 


te bool 


bool 


-组 Touch 对 象 
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TouchList touches; 
TouchList targetTouches; 
TouchList changedTouches; 


te bool 


altKey; 
metaKkey; 
ctrlKey; 
shiftKey; 


Ladentifiers 


te EventTarget target; 


screenXx; 
screeny; 
clientxX; 
clientyY; 
pagexX; 
pageY; 


图 13-2 HTML5 Touch Events 定 义 的 TouchEvent 接 口 


根据 标准 中 的 定义 ，TouchEvent 分 成 4 种 类 型 : 
熟悉 触 控 ed ea 


touchmove、touchend 和 touchcancel。 


理解 ， 它 们 分 别 表示 触 控 点 开始 接触 屏幕 、 触 控 点 移动 、 触 控 点 离 


屏幕 和 触 控 点 取消 。 


AIA ARTE 


等 。TouchEvent 当 
事件 类 似 的 处 理 方 式 ， 不 


来 分 析 它 们 。 


然 还 


VAY dhe 


最 后 一 


个 类 型 理解 起 来 比较 困难 ， 有 时 浏览 器 
能 因为 其 他 一 些 原因 ， oe aa 
是 继承 自 DOM 的 UIEvent， 
同 点 在 于 这 个 事件 有 一 些 不 同 的 属性 。 下 面 


。 “touches” : 表示 当前 屏 ised ce “touches” = — 
列表 ， 如 果 触 控 点 大 于 1， 表 示 这 


一 个 支持 多 点 触 控 的 设备 。 


touchstart 、 


这 表明 它 有 同 其 他 


e “targetTouches” : 表示 的 是 当前 所 有 起 始 于 当前 DOM 元 素 的 触 
控 点 ， 也 就 是 如 果 一 个 触 控 点 的 “touchstart* 事 件 发 生 的 位 置 在 该 
元 素 的 区 域内 ， 那 就 会 被 包含 在 该 列表 中 。 

“changedTouches”: 表示 发 生变 化 的 触 控 点 。 如 果 类 型 是 
“touchstart*”， 那 就 包含 新 的 触 控 点 。 如 果 是 “touchmove”， 那 就 包 
含 发 生 移动 的 触 控 点 。 而 “touchend”* 就 是 指 触 控 点 移出 了 屏幕 。 


每 个 触 控 点 都 需要 包含 很 多 信息 ， 也 就 是 图 13-2 中 的 众多 属性 ， 
主要 是 标记 属性 的 唯一 ID、 触 控 的 目标 (也 就 是 对 于 的 DOM 元 素 ) 、 
屏幕 位 置 、 视 图 中 的 位 置 等 ， 看 起 来 还 是 比较 直观 的 。 有 了 这 些 接 
口 ，JavaScript 代 码 能 够 非常 清楚 地 知道 每 个 触 控 点 的 信息 ， 就 能 够 像 
本 地 代码 一 样 使 用 它们 来 满足 各 种 应 用 的 需求 。 


使 用 的 方法 并 不 复杂 ， 示 例 代 码 13-1 展 示 了 如 何 注册 监听 事件 的 
处 理 函 数 ， 这 同 其 他 的 DOM 事 件 区 别 并 不 是 特别 大 ， 而 且 也 只 能 注册 
在 特定 的 元 素 〈 称 为 Clickable Element) 上 上， 如 “div” 等 。 为 
TouchEvent 有 四 种 类 型 ， 示 例 代 码 定 义 了 其 中 三 种 类 型 触 控 事件 的 处 
理 了 为 数 。 以 *touchstart” 为 例 ， 它 会 接受 一 个 事件 ， 就 是 之 前 定义 的 
TouchEvent 接 口 ， 为 了 避免 同 浏览 器 行为 的 冲突 ， 可 以 在 最 开始 调用 
“preventDefault”， 这 在 第 5 章 也 做 过 介绍 。 后 面 可 以 根据 事件 来 做 出 相 
应 的 动作 。 


示例 代码 13-1 使 用 HTML5 Touch Events 的 JavaScript 代 码 


Var targetElement 
document .getElementById("aTouchableElement"); 


targetElement.addEventListener("touchstart", 


onTouchStartEvent, false); 
targetElement.addEventListener("touchmove", 

onTouchMoveEvent, false); 
targetElement.addEventListener("touchend", 


onTouchEndEvent, false); 


function onTouchStartEvent(event) { 
// 处 理事 件 
event.preventDefault(); 
event.touches; 
event.targetTouches; 


event .changedTouches; 


有 了 这 些 原始 的 触 控 事件 ，Wweb 开 发 者 可 以 在 网 页 中 使 用 
JavaScript 代 码 来 识别 这 些 原始 触 控 事 件 并 生成 手势 事件 ， 如 Long 
Press、Pinch、Swipe、Fling 等 手势 事件 。 目 前 有 很 多 库 提供 这 样 的 实 
现 ， 如 jQuery Mobile, Sencha Touch 等 ， 这 极 大 地 方便 了 Web 开 发 者 。 


除了 原始 的 触 控 事件 ， 苹 果 公 司 开发 的 Safari 浏 览 器 还 支持 向 
JavaScript 代 码 提供 Gesture Events， 其 含义 是 由 浏览 器 来 识别 原始 事件 
并 将 手势 事件 传递 给 JavaScript 人 代码， 当然 它 定 义 了 一 个 新 的 
GestureEvent 接 口 ， 事 件 类 型 也 分 为 gesturestart、 gesturechange 和 
gestureend。 这 里 的 手势 事件 并 没有 与 上 面 定 义 的 Pinch 等 采用 同样 的 
方式 ， 而 是 将 旋转 角度 和 缩放 大 小 数据 传递 给 JavaScript， 这 更 像 是 支 


持 两 个 手指 的 触 控 事 件 。 由 于 它 的 局 限 性 和 不 够 通用 ， 所 以 并 没有 得 
到 像 原始 触 控 事件 一 样 比较 广泛 的 支持 ， 这 里 也 不 做 过 多 的 介绍 。 


13.1.2 ”工作 原理 


WebKit 和 Chromium 是 如 何 支 持 触 控 事 件 的 呢 ? 其 实 这 是 比较 复杂 
的 过 程 ， 特 别 是 某 些 处 理 方 式 跟 鼠标 事件 其 实 还 是 有 不 一 样 的 地 方 。 
首先 事件 的 派送 机 制 依然 是 使 用 第 5 章 介绍 的 捕获 和 冒 泡 机 制 ， 具 体 参 
看 图 5-18 的 过 程 。 


13-3 描 述 WebKit 处 理 触 控 事件 所 使 用 到 的 一 些 主要 类 和 它们 之 
间 的 关系 。 最 下 层 的 WebWidget 和 WebView 是 WebKit 的 Chromium 移 植 
提供 的 接口 ， 同 之 前 介绍 的 一 样 ， 它 们 也 是 被 Chromium 项 目的 代码 所 
调用 ， 当 Chromium 接 收 到 事件 之 后 会 将 其 传 给 WebViewImpl 这 个 非常 
重要 的 类 来 处 理 。 这 个 类 大 家 应 该 很 熟悉 了 ， 因 为 已 经 见 过 很 多 次 面 
了 。 因 为 事件 有 多 种 类 型 ，WebViewImpl 类 借助 于 PageWidgetDelegate 
类 来 处 理 和 区 分 这 些 输入 事件 。 经 过 PageWidgetDelegate 类 处 理 后 的 事 
件 会 调用 WebViewImpl 类 各 个 事件 处 理 接口 ， 而 WebViewImpl 类 的 这 
些 接口 基本 上 使 用 主 杠 (Frame) 的 事件 处 理 句柄 EventHandler 对 象 来 
处 理事 件 。 细 心 的 读者 可 以 发 现 ， 图 中 的 EventHandler 包 含 两 个 
数 ， 第 一 个 是 处 理 原 始 触 控 事件 的 函数 ， 第 二 则 是 处 理 手势 事件 的 
数 。 为 什么 会 这 样 呢 ? 


函 
函 


PageWidgetDelegate Page WidgetEventHandler 


+handlelnputEvent( ) +handleTouchEvent) 
| 4+handleGestureEvent() 


1 
WebViewlmpl | Frame | EventHandler 
+handlelnputEvent() | ~ —|+eventHandler() <> +handleTouchEvent() 


+handleGestureEvent() +handleGestureEvent() 


V 
WebWidget 
> +handlelnputEvent() 


图 13-3 ”WebKit 处 理 触 控 事件 的 基础 设施 


WebKit 除 了 接收 原始 的 触 控 事件 之 外 ， 还 需要 它 的 移植 或 者 说 是 
浏览 器 提供 手势 事件 ， 这 些 事件 会 触发 WebKit 的 默认 动作 。 例 如 
“LongPress” 事 件 ， 它 表示 手指 在 屏幕 上 长 按 一 段 时 间 ， 这 需要 浏览 
将 其 识别 成 手势 事件 然后 传递 给 WebKit， 当 WebKit 接 收 到 这 个 事件 之 
后 ， 触 发 自己 的 默认 动作 。 这 个 事件 同 前 面 介绍 的 Safari 提 供 的 Gesture 
Events 不 是 一 回 事 ， 因 为 Safari 只 是 提供 了 旋转 和 缩放 的 值 给 
JavaScript， 而 这 里 的 手势 事件 包括 一 个 或 者 多 个 手指 触发 的 动作 ， 
WebKit 并 不 会 将 这 里 的 手势 事件 传递 给 JavaScript 代 码 ， 如 “longPress” 
事件 会 触发 浏览 器 弹出 右键 菜单 的 动作 。 


对 于 多 框 结构 的 网 页 ， 事 件 首先 由 WebKit 交 给 主 框 处 理 ，WebKit 
会 检查 该 事件 是 否 需要 由 子 框 处 理 ， 如 果 是 的 话 ，WebKit 会 将 该 事件 
派发 给 子 Frame， 依 此 类 推 。 这 是 一 个 递归 过 程 ， 请 读者 结合 第 三 章 
介绍 的 框 结构 来 理解 该 过 程 。 


下 面 来 分 析 一 下 在 Chromium 中 浏览 器 是 如 何 处 理 从 系统 传递 过 来 
的 触 控 事 件 ， 并 将 它们 转换 成 之 后 的 手势 事件 的 。 这 一 过 程 稍 显 复 
杂 ， 让 我 们 来 解释 一 下 原因 。 当 触 控 事件 发 生 后 ，Chromium 首 先 需要 


将 触 控 事件 保存 ， 然 后 使 用 众多 的 手势 识别 器 (Gesture Recognizers) 
来 将 其 识别 成 手势 事件 。 此 时 ， 如 下 面 所 描述 的 问题 来 了 。 


。 Chromium 是 否 需 要 将 所 有 的 原始 触 控 事 件 传递 给 网 页 呢 ? 答案 是 
否定 的 。 如 一 些 网 页 并 没有 注册 监听 遂 数 来 处 理 它们 ， 那 么 就 会 
造成 极 大 的 浪费 ， 因 为 这 些 事件 的 传递 和 处 理 是 个 稍 长 的 过 程 。 
更 为 致命 的 是 ， 一 个 简单 的 用 户 操作 通常 有 非常 多 的 事件 ， 这 会 
极 大 地 浪费 CPU 等 资源 。 

为 什么 需要 Gesture Event 传 递 给 WebKit 呢 ? 因为 是 由 浏览 器 识别 
并 将 识别 出 结果 的 事件 传递 给 webKit， 这 客观 上 能 够 有 效 减少 很 
多 事件 的 传递 。 

除了 发 送 TouchEvent 和 GestureEvent 之 外 ， 也 可 能 会 发 送 
MouseEvent， 这 是 为 什么 ? 原因 很 简单 ， 因 为 目前 还 存在 一 些 网 
页 ， 它 们 需要 监听 鼠标 相关 的 事件 以 完成 特定 的 动作 ， 如 果 
Chromium 不 模拟 这 些 事件 ， 那 么 网 页 显然 不 能 正常 的 工作 。 但 是 
某 些 鼠 标 事件 可 以 模拟 ， 如 MouseDown 其 实 对 应 于 TouchStart， 
MouseUp 对 应 用 TouchEnd 等 。 但 是 MouseOver 就 比较 麻烦 ， 比 如 
一 些 网 页 需要 根据 当前 鼠标 悬浮 事件 来 显示 一 个 菜单 ， 这 对 于 触 
控 设 备 来 说 ， 的 确 是 一 个 问题 。 


对 于 Chromium 来 说 ， 事 件 的 处 理 还 是 相当 复杂 的 ， 因 为 需要 三 种 
类 型 的 事件 并 将 其 传递 给 WebKit。 由 于 触 控 事 件 最 初 是 应 用 在 移动 设 
备 上 的 ， 所 以 这 里 也 主要 以 Chromium 的 Android 版 为 例 来 介绍 ， 而 
Chromium 的 桌面 版 对 触 控 事件 的 支持 目前 还 不 是 特别 完善 。 


在 Chromium 的 Android 版 中 ， 所 有 的 事件 都 是 由 Android 系 统 传送 
过 来 的 ， 这 也 意味 着 事件 的 处 理 首先 是 在 Java 层 ， 当 然 是 在 Browser 进 


程 的 主线 程 中 ， 如 图 13-4 所 示 为 层次 结构 图 和 相关 层次 中 的 基础 设 
施 。Java 层 主要 包含 两 个 类 。 


WebWidget RenderWidget 
EN y 


+handlelnputEvent() < 一 -webwidget_ Renderer 进程 
+OnHandletinputEvent() 
ee i Sa 
RenderWidgetHostimpl Immediate In putRouter 
+ForwardGestureEvent() ee +SendTouchEvent() Browser 进程 
+ForwardTouchEventWithLatency|Info() +SendGestureEvent() i 


+SendWebinputEvent() 


RenderWidgetHostViewAndroid ContentViewCorelmpl 


+SendGestureEvent() ie wee a ee +SendTouchEvent() Pe 
+SendTouchEvent() +SendGestureEvent() 


JNI 
Java:ContentViewGestureHandler Java:ContentViewCore 
[> 


13-4 ” Chromium 处 理 触 控 事件 的 基础 设施 


Java 层 


e ContentViewGestureHandler : 它 主 要 有 几 个 任务 。 首 先 ， 它 需 
要 通过 相应 的 设施 来 决定 是 否 需要 原始 的 触 控 事 件 ， 这 其 实 依 赖 
于 WebKit， 在 每 个 "touchstart" 事 件 开 始 的 时 候 ， 需 要 进行 HitTest 
检查 ， 该 动作 检查 当前 触 控 点 所 对 应 的 元 素 ， 然 后 检查 该 元 素 是 
否 注 册 了 监听 事件 的 水 数 ， 如 果 是 ， 需 要 将 原始 事件 传送 给 
WebKit。 其 次 是 各 种 手势 事件 的 识别 器 ， 它 们 能 够 对 WebKit 所 需 
要 的 各 种 手势 进行 识别 并 传递 给 WebKit， 最 后 根据 需要 (如 果 有 
鼠标 事件 的 监听 冰 数 ) 模拟 鼠标 事件 。 

。 ContentViewCore 类 : 主要 负责 将 C++ 中 的 功能 桥接 到 Java 层 中 ， 
并 将 Java 中 处 理 好 的 事件 等 信息 桥接 到 C++ 代码 中 ， 它 对 应 C++ 中 


的 类 是 ContentViewCoreImpl。 


这 两 个 类 主要 负责 Java 层 的 事件 处 理 和 传递 。 


在 Java 层 之 下 是 著名 的 RenderWidgetHostView 类 ， 它 表示 一 个 网 
页 的 视图 。 虽 然 这 是 Browser 进 程 中 的 代理 类 ， 表 示 的 是 Renderer 进 程 
中 相应 的 网 页 视图 ， 它 被 ContentViewCoreImpl 用 来 将 事件 传递 给 
Renderer 进 程 。 后 面 大 家 应 该 比较 清楚 了 ，Chromium 通 过 IPC 机 制 | 来 
完成 传递 ，Browser 进 程 中 的 基础 类 是 ImmediateInputRouter， 而 
Renderer 进 程 中 的 基础 类 是 RenderWidget 类 。 


在 Renderer 进 程 中 ，RenderWidget 在 Chromium 中 表示 网 页 的 结 
构 ， 它 拥有 前 面 WebKit 定 义 的 接口 类 WebWidget， 这 样 ， 完 整 的 过 程 
就 被 这 些 类 串联 起 来 了 ， 如 图 13-4 所 示 。 


13.1.3 ”启示 和 实践 


示例 代码 13-1 其 实 是 一 个 非 澡 典 型 的 用 法 ， 只 是 对 于 鼠标 、 触 控 
等 类 型 的 事件 处 理 过 程 可 能 需要 复杂 一 些 的 步骤 。 


网 页 除了 可 能 需要 自身 处 理 触 控 事件 以 外 ， 还 有 一 个 比较 特别 的 
问题 ， 那 就 是 对 于 一 个 为 移动 设备 定制 的 网 页 ， 它 可 能 不 需要 使 用 缩 
放 网 页 (使 用 Pinch 手 势 的 浏览 器 默认 行为 来 放大 或 者 缩放 网 页 ) 或 者 
不 需要 翻滚 网 页 (Fling 手 势 的 浏览 器 默认 行为 是 滚动 网 页 ) ， 因 开发 
者 已 经 考虑 并 设计 出 了 适合 移动 设备 网 页 阅读 的 网 页 了 。 那 有 没有 办 
法 帮助 开发 者 和 浏览 器 合力 规避 浏览 器 默认 行为 呢 ? 


根据 上 面 的 描述 ， 相 信 读 者 已 经 看 出 一 些 端 侃 了 ， 那 就 是 网 页 开 
发 者 可 以 注册 事件 的 响应 函数 ， 并 调用 “preventDefault" 函 数 来 阻碍 浏 


览 器 执行 默认 行为 。 问 题 是 这 一 方法 只 是 针对 某 个 元 素 而 已 ， 而 不 是 
整个 网 页 ， 只 是 当 手 指 触 控 到 该 元 素 的 时 候 才 茶 止 默认 行为 。 解 决 这 
一 问题 的 方法 很 简单 ， 那 就 是 可 以 将 六 数 注 册 到 区 域 更 大 的 元 素 ， 如 
示例 代码 13-2 所 示 的 使 用 “body” 元 素 就 可 以 解决 这 个 问题 。 


示例 代码 13-2 使 用 触 控 事件 的 响应 水 数 来 禁止 网 页 的 方法 和 滚动 的 
代码 


function handleEvent(event) { 


event.preventDefault(); 


document .body.addEventListener('touchstart', handleEvent, 
false); 

document .body.addEventListener('touchmove', handleEvent, 
false); 

document .body.addEventListener('touchend', handleEvent, 


false); 


这 个 方法 看 起 来 还 是 需要 一 些 代码 ， 虽 然 只 是 短 短 的 不 到 十 行 代 
码 ， 但 是 除 此 以 外 还 有 一 个 更 好 更 简单 的 办 法 ， 那 就 是 使 用 “meta” 标 


x 


Zo 


13.2 ”移动 化 用 户 界面 


HTML5 为 移动 领域 做 了 大 量 的 工作 ， 其 中 “meta” 标 签 中 的 众多 设 
置 值 能 够 帮助 提供 非常 好 的 移动 用 户 体 验 。 一 个 典型 的 例子 就 是 上 面 
是 到 的 用 该 标签 来 控制 网 页 缩放 ， 如 示例 代码 13-2 使 用 了 一 些 
JavaScript 代 码 来 完成 ， 而 实际 上 ，“meta” 标 签 能 够 非常 简单 地 完成 这 
一 目的 ,方式 如 下 所 示 。 


<meta name="viewport" content=" user-scalable=no"> 


非常 简单 的 一 行 代码 ， 就 能 够 将 缩放 功能 取消 而 不 需要 相对 复杂 
的 JavaScript 代 码 ， 遗 憾 的 是 ， 目 前 “meta” 标 签 只 能 用 来 控制 缩放 ， 而 
没有 能 力 解决 不 能 翻 页 的 问题 。 而 WebKit 很 好 地 解决 了 这 一 问题 ， 不 
过 这 仅仅 是 个 开始 ， 下 面 介绍 一 些 WebKit 支 持 的 非常 有 用 和 常见 的 功 


和 已 
月 co 


首先 是 同 Viewport 相 关 的 功能 。 使 用 meta 标 签 最 常见 的 设置 就 是 
“viewport*”， 视 窗 的 概念 之 前 介绍 过 ， 它 表示 当前 可 视 的 区 域 。 因 为 设 
备 的 大 小 有 差异 ， 所 以 如 何 使 网 页 的 宽度 适合 屏幕 的 宽度 就 显得 非常 
重要 了 (根据 之 前 的 讨论 ， 其 实 垂 直方 向 上 的 长 度 没有 宽度 重要 ) , 
方式 如 下 所 示 。 


<meta name="viewport" content="width=device-width, initial- 
scale=0.9, minimum-scale=0.5, maxium-scale=1.0, user- 


scalable=no"> 


上 面 这 段 代 码 相 对 比较 容易 理解 ， 设 置 的 名 字 是 "viewport"， 视 窗 
的 宽度 就 是 设备 的 宽度 ， 而 初始 缩放 大 小 是 0.9， 最 小 的 缩放 比例 是 


0.5， 最 大 的 缩放 比例 是 1.0， 而 且 不 允许 用 户 使 用 手势 来 缩放 它们 。 但 
是 这 只 是 解决 了 部 分 问题 ， 因 为 如 果 设 备 差异 特别 大 ， 那 么 过 大 的 缩 
放 比 例 对 用 户 的 体验 是 灾难 性 的 ， 用 来 应 对 这 一 灾难 的 


就 是 稍 后 介绍 的 响应 式 设 计 和 “Media Queries” 技 术 。 


其 次 是 全 屏 浏览 。 因 为 移动 设备 通常 屏幕 较 小 ， 所 以 浏览 器 的 地 
址 栏 和 移动 系统 上 的 状态 栏 会 占用 较为 可 观 的 可 视 区 域 ， 因 此 Safari 提 
供 了 一 些 设置 来 解决 这 个 问题 ， 就 是 使 用 全 屏 浏览 模式 ， 代 码 如 下 。 


<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" 


content="black- translucent"> 


不 过 目前 仅 有 iOS 系 统 上 的 Safari 浏 览 器 提供 类 似 的 支持 ， 还 有 一 
种 并 不 完美 的 方式 ， 但 可 能 较为 通用 ， 代 码 如 下 。 


window.addEventListener('load', function(e) { 
setTimeout(function() { window.scrollTo(0, 1); }, 1); 


}, false); 


最 后 是 图 标的 设置 。 为 了 让 网 页 在 移动 设备 中 也 能 像 其 他 应 用 
(这 个 会 在 第 15 章 详细 介绍 ) 一 样 ， 可 以 设置 该 网 页 的 图 标 ， 使 用 的 
方法 是 使 用 “link” 标 签 设置 ， 在 Android 浏 览 器 中 的 方式 是 使 用 如 下 属 
性 ， 与 safari 中 的 设置 类 似 。 


<link rel="apple-touch-icon-precomposed" 


href="/path/to/icon/image" /> 


上 面 的 这 些 设置 ， 在 WebKit 中 的 实现 其 实 并 不 是 特别 困难 ， 而 且 
这 些 功 能 的 引入 对 移动 设备 特别 有 用 ， 现 在 已 经 被 较为 广泛 地 使 用 。 


响应 式 设计 现在 已 经 被 炒 得 非常 热 了 ， 其 基本 思想 是 根据 不 同 分 
辨 率 或 者 说 不 同 大 小 的 屏幕 ， 设 计 不 同 的 布局 ， 那 么 浏览 器 虽然 知道 
当前 的 分 辨 率 和 屏幕 大 小 ， 可 如 何 将 开发 者 为 该 屏幕 设计 的 网 页 布局 
应 用 在 当前 网 页 的 泻 染 中 呢 ? 这 就 用 到 CSS 规 范 中 的 “Media Queries” 
技术 。 


关于 “media” 在 第 6 章 中 做 过 一 些 介 绍 ， 如 它 能 够 区 分 CSS 应 用 在 
屏幕 或 者 打印 等 不 同 场 景 ， 但 是 这 只 是 其 中 的 一 个 设置 ， 而 且 是 比较 
简单 的 。 


@media (min-width: 1280px) and (min-height: 720px) and 
(Orientation: landscape) { 


body { .. } 
div { .. } 


这 段 代 码 表 示 定 义 在 该 media 之 下 的 规则 应 用 在 分 辨 率 大 于 
1280*720 的 设备 上 上， 并且 是 横 屏 模式 ， 因 为 屏幕 大 小 有 了 明显 的 限 
制 ， 做 出 合适 的 网 页 布局 就 变 得 容易 了 。 


13.3 ”其 他 机 制 
13.3.1 ”新 泻 染 机 制 


为 了 移动 领域 更 好 的 用 户 体验 ， 泻 染 机 制 所 做 的 改进 主要 是 提升 
泻 染 性 能 来 增加 响应 的 速度 ， 甚 至 不 惜 牺牲 一 些 跟 规范 定义 的 行为 不 
一 致 的 地 方 。 在 这 一 小 节 中 主要 介绍 三 个 方面 的 技术 ， 其 一 是 Tiled 
Backing Store， 其 二 是 线程 化 泻 染 ， 其 三 是 快速 移动 翻 页 。 


目前 主流 的 移动 设备 上 ， 触 控 操 作 是 必 不 可 少 的 用 户 交 互 方式 。 
同 桌面 系统 不 一 样 的 是 ， 网 页 的 泻 染 结果 需要 对 用 户 的 响应 度 有 很 高 
的 要 求 。 不 幸 的 是 ， 移 动 设备 的 能 力 比 桌面 机 器 的 能 力 还 是 要 差 一 
些 ， 为 此 ， 在 最 早 的 QtwebKit 中 引入 了 一 项 技术 ， 这 就 是 Tiled 
Backing Store 机 制 ， 其 核心 思想 是 使 用 后 端的 缓存 技术 来 预先 绘制 网 
页 和 减少 网 页 的 重 绘 动作 ， 也 就 是 使 用 空间 换 时 间 的 典型 思路 。 


最 初 这 一 思路 出 现在 软件 泻 染 中 的 ， 使 用 CPU 分 成 瓦 片 块 (Tile) 
的 内 存 来 保存 绘制 的 网 页 内 容 ， 也 就 是 图 13-5 中 所 示 的 这 样 ， 不 同 点 
在 于 它 是 使 用 CPU 来 分 配 并 保存 这 些 瓦 片 块 ， 而 且 通 常会 超过 视窗 
(Viewport) 大 小 ， 也 许 会 是 它 的 两 倍 。 这 同样 是 一 种 典型 的 用 空间 
换 时 间 的 做 法 。 


> Viewport+ 


> Total Page: 


图 13-5 “使 用 Tiled Backing Store 演 染 技 术 的 网 页 


该 图 跟 图 8-18 有 类 似 之 处 ， 只 是 该 图 中 的 后 端 存 储 表 示 的 是 诠 染 
中 的 一 层 ， 而 这 里 是 指 这 个 网 页 ， 因 为 这 里 是 针对 软件 泻 染 机 制 ， 同 
时 缓存 的 一 个 瓦 片 很 容易 被 重复 利用 ， 因 为 每 个 瓦 片 大 小 一 致 ， 这 一 
原理 第 8 章 中 做 过 一 些 分 析 ， 区 别 在 于 这 里 不 用 担心 GPU 所 能 支持 的 纹 
ee Nd R 
有 些 过 时 ， 因 为 使 用 硬件 加 速 泻 染 成 为 一 种 主流 的 方式 ， 这 一 方法 逐 
渐 被 抛弃 ， 但 是 其 思想 还 是 很 有 意义 的 。 


随 着 移动 设备 进入 多 核 时 代 ， 如 果 泻 染 过 程 仅仅 是 由 一 个 线程 来 
完成 ， 这 不 能 不 说 是 一 个 巨大 的 浪费 。 而 且 ， 同 桌面 系统 强大 的 单 核 
能 力 不 同 的 是 ， 因 为 耗 电 等 原因 ， 单 核 的 能 力 明 显 处 于 一 个 稍 差 的 阶 
段 ， 所 以 将 泻 染 过 程 分 成 若干 个 独立 的 步骤 ， 然 后 使 用 不 同 的 线程 来 
完成 其 中 的 某 个 或 者 几 个 步骤 可 能 成 为 未 来 WebKit (和 Blink) 泻 染 引 

一 个 重要 的 发 展 方向 ， 特 别 对 于 移动 领域 来 说 尤为 重要 。 读 者 可 能 


会 疑惑 这 些 步骤 之 间 依 赖 性 是 否 非常 强 ， 是 不 是 不 可 能 或 者 很 难 达 到 
这 一 效果 ， 现 实 是 一 些 过 程 已 经 被 实现 了 ， 图 13-6 描 述 了 Chromium 的 
线程 化 合成 过 程 。 


> 


0000000 
000000 


© 合成 任务 . 
© RES- 
I] «tz. 


图 13-6 ”使 用 线程 化 的 合成 器 来 泻 染 网 页 


因为 合成 阶段 是 依赖 之 前 阶段 绘制 的 各 个 层 结 果 ， 所 以 主要 的 神 
秘 之 处 在 于 图 8-16 所 设计 使 用 的 Layer 树 和 LayerImpl 树 ， 其 中 Layer 树 
在 主线 程 ， 而 LayerImpl 树 工作 在 一 个 专门 用 来 泻 染 的 线程 ， 两 者 通过 
线程 通信 来 进行 同步 ， 这 样 就 独立 开 来 ， 从 而 提升 网 页 滚动 时 候 的 用 
户 体验 ， 因 为 这 时 主要 使 用 合成 器 来 完成 新 网 页 的 显示 。 同 时 ， 合 成 
工作 并 不 会 阻止 Renderer 进 程 的 主线 程 ， 也 就 是 webKit 工 作 的 线程 。 
未 来 ，Chromium 应 该 也 不 会 满足 目前 的 优化 ， 可 能 会 把 这 个 泻 染 过 程 
都 通过 线程 化 来 进行 ， 甚 至 今后 JavaScript 代 码 也 能 够 支持 多 线程 编 
程 ， 这 能 够 有 效 提升 JavaScript 代 码 的 能 力 。 


因为 移动 领域 还 存在 一 些 能 力 的 局 限 性 ， 但 WebKit 为 了 更 好 的 用 
户 体验 ， 也 做 出 了 一 些 妥 协 ， 如 快速 滚动 机 制 (Fast Mobile 
Scrolling) 。 先 看 背景 ， 下 面 是 CSS 中 的 一 个 规则 。 


body { 
background-image: url(background.gif); 
background-repeat: repeat-x; 
background-attachment: fixed; 


} 


这 段 代 码 的 含义 是 当 body 元 素 在 滚动 的 时 候 ， 它 背后 的 背景 图 片 
一 直 固 定 在 文字 后 面 ， 而 不 会 随 着 网 页 的 浴 动 而 深 动 ， 如 图 13-7 所 示 
的 结果 。 图 中 显示 了 三 张 育 景 图 片 ， 因 为 设置 的 只 是 在 X 方 向 的 重复 
〈 避 免 Y 方 向 重复 ， 这 样 滚动 的 时 候 不 容易 看 出 效果 ) ， 所 以 当 发 生 
滚动 的 时 候 ， 这 三 张 图 片 总 是 以 背景 的 方式 出 现在 该 深 动 区 域 的 最 上 
部 分 ， 而 不 会 随 着 内 容 的 滚动 而 发 生 滚 动 。 


Hello World! ae 背景 总 是 在 最 上 面 


看 一 一 AKI 


‘orld! 


"orld! 


Hello World! 


图 13-7 使 用 “Fixed”* 模 式 的 背景 图 片 


这 一 CSS 的 样式 设置 会 触发 WebKit 进 入 一 种 称 为 “Slow Repaint 
( 慢 速 重 绘 ) ”的 模式 ， 去 以 避免 一 种 称 为 “Rendering Artifacts” 的 现象 
(前 面 一 帧 的 某 些 数据 出 现在 后 面 的 绘制 中 ) 。 因 为 WebKit 要 在 快速 
滚动 中 绘制 一 个 静止 的 元 素 非 常 困难 ， 只 能 通过 慢 速 重 绘 ， 而 重 绘 会 
降低 网 页 的 性 能 ， 特 别 是 降低 界面 的 响应 度 。 然 而 ， 在 移动 设备 上 ， 


对 于 用 户 交 互 的 响应 度 要 求 特 别 高 ， 降 低 响 应 度 就 是 一 个 大 问题 。 但 
解决 问题 的 方式 很 简单 ， 就 是 取消 该 属性 的 设置 ， 这 的 确 是 一 个 折 中 
的 方案 。 


13.3.2 ”其 他 机 制 


为 了 更 好 地 支持 移动 设备 ，WebKit 做 了 大 量 的 工作 ， 引 入 了 一 些 
新 的 机 制 ， 例 如 ， 在 本 节 中 ， 主 要 介绍 两 种 技术 ， 其 一 是 Application 
Cache， 其 二 是 Frame Flatterning 技 术 ， 也 就 是 处 理 网 页 的 多 框 结构 。 
更 多 内 容 ， 有 兴趣 的 读者 可 以 通过 
“http://trac.webkit.org/wiki/Mobile%20Features%20Talk” 来 了 解 一 些 重要 
的 功能 ， 限 于 篇 幅 ， 这 里 不 再 一 一 介绍 。 


移动 设备 因为 其 移动 的 特性 ， 需 要 能 够 提供 离线 浏览 网 页 对 的 内 
容 ， 而 应 用 缓存 (Application Cache) 这 一 新 支持 的 机 制 能 够 支持 离线 
浏览 ， 同 时 还 能 够 加 速 资源 的 访问 并 加 快 启动 速度 。 它 的 基本 思想 是 
使 用 缓存 机 制 并 缓存 那些 需要 保存 在 本 地 的 资源 ， 开 发 者 可 以 现实 指 
定 哪 些 是 需要 缓存 的 资源 ， 并 且 使 用 起 来 非常 简单 。 


<html manifest="app.appcache"> 


</html> 


只 是 需要 在 “html” 标 签 上 加 入 属性 “manifest>， 指 向 一 个 文件 ， 该 
文件 格式 如 图 13-8 所 示 ， 以 此 来 定义 哪些 资源 需要 缓存 。 该 例子 表 


明 ， 它 要 缓存 4 个 文件 ， 这 样 在 离线 情况 下 ， 用 户 也 能 使 用 该 网 页 并 进 
行 离线 访问 。 


CACHE MANIFEST 

# 需要 组 存在 本 地 的 资源 
CACHE: 

app. html 

app.css 

app -png 

app.js 


13-8 “app.appcache” 文 件 的 内 容 


不 仅 如 此 ， 规 范 还 提供 了 接口 来 控制 和 访问 网 页 中 应 用 缓存 的 状 
态 信息 等 ， 下 面 的 例子 就 是 使 用 规范 定义 的 接口 来 更 新 缓存 的 内 容 。 
首先 是 注册 一 个 回调 水 数 ， 当 更 新 后 触发 该 水 数 ， 如 果 更 新 成 功 ， 那 
么 需要 将 旧 的 缓存 清除 掉 ， 填 充 新 的 缓存 内 容 ， 这 就 是 swapCache 团 
数 的 作用 ， 如 示例 代码 13-3， 在 代码 最 后 ， 调 用 update 函 数 就 可 以 完成 
触发 更 新 资源 的 目的 了 。 有 了 这 些 ， 离 线 使 用 就 变 得 很 容易 。 


示例 代码 13-3 ”使 用 应 用 缓存 接口 来 更 新 缓存 内 容 


var appCache = window.applicationCache; 
appCache.addEventListener("updateready", function(event) { 
if (appCache.status == appCache.UPDATEREADY) { 
appCache.swapCache(); 


} else { 


}); 


// 重新 下 载 缓存 的 资源 
appCache.update(); 


接 下 来 介绍 框 结构 在 移动 设备 上 的 特殊 处 理 。 第 3 章 已 经 介绍 过 网 
页 的 框 结构 ， 其 中 讲 到 网 页 可 能 包含 多 个 框 ， 每 个 框 都 可 以 包含 一 个 
滚动 条 (如 果 该 框 在 布局 中 的 大 小 要 比 实际 的 内 容 小 ) ， 也 就 是 框 内 
部 是 可 以 滚动 的 。 当 光标 在 该 框 中 的 时 候 ， 滚 动 鼠 标 中 键 能 够 滚动 该 
框 的 内 容 。 但 是 在 移动 设备 上 ， 因 为 屏幕 和 触 控 的 缘故 ， 用 户 可 能 不 
知道 需要 滚动 网 页 还 是 框 ， 因 此 ，iframe 和 frameset 等 多 框 结构 很 难 在 
移动 设备 上 使 用 ， 为 此 ，WebKit 使 用 了 一 种 称 为 “Frameset Flatterning” 
的 技术 ， 该 技术 的 含义 是 将 框 中 的 内 容 全 部 显示 在 网 页 中 ， 通 俗 来 讲 
就 是 将 框 中 的 内 容 平 铺 在 网 页 中 ， 而 不 用 设置 滚动 条 ， 这 也 就 意味 
着 ， 用 户 只 是 滚动 网 页 ， 当 然 框 中 的 内 容 也 包含 在 网 页 中 ， 也 会 随 着 
网 页 的 滚动 而 发 生变 化 。 


上 面 介 绍 的 这 些 技术 都 在 WebKit 中 得 到 了 很 好 的 支持 ， 开 发 者 可 
以 借助 于 这 些 技 术 开 发 出 用 户 体验 更 好 的 网 页 和 和 Web 应用。 除了 
WebKit 等 泻 染 引擎 为 移动 领域 做 了 众多 的 工作 ， 在 Web 开 发 领域 ,也 
有 众多 的 JavaScript 框 染 为 移动 领域 量 身 设计 了 JavaScript 库 ， 现 在 较为 
流行 的 如 jQuery Mobile, Sencha Touch 等 ， 它 们 当然 也 使 用 了 上 面 介 
绍 的 一 些 技 术 ， 如 HTML5 Touch Events、 移 动 上 的 用 户 界 面 等 。 


第 14 章 ”调试 机 制 


支持 调试 HTML、CSS 和 JavaScript 代 码 是 浏览 器 或 者 泻 染 引 擎 需 
要 提供 的 一 项 非常 重要 的 功能 ， 这 里 包括 两 种 调试 类 型 : 其 一 是 功 
能 ， 其 二 是 性 能 。 功 能 调试 能 够 帮助 HTML 开 发 者 使 用 单 步调 试 等 技 
术 来 查找 代码 中 的 问题 ， 性 能 调试 能 够 采集 JavaScript 代 码 、 网 络 等 性 
能 瓶颈 。 当 然 ， 这 只 是 对 于 HTML 开发 者 来 说 的 。 因 为 对 于 性 能 
言 ， 问 题 可 能 存在 于 HIML 人 代码， 也 可 能 是 浏览 器 本 身 的 问题 。 为 
此 ，Chromium 的 工程 师 开 发 出 另外 一 套 机 制 “Tracing” 技 术 ， 它 能 
够 收集 Chromium 内 部 代码 的 工作 方式 和 性 能 瓶 颈 ， 以 帮助 定位 
Chromium 本 身 的 问题 。 


14.1 Web Inspector 
14.1.1 基本 原理 


在 之 前 的 多 个 章节 中 ，Chromium 的 开发 者 工具 被 用 来 帮助 了 解 泻 
染 引 擎 和 浏览 器 背后 的 原理 ， 这 一 工具 实际 上 是 基于 WebKit 的 Web 
Inspector 技 术 开 发 出 来 的 ， 它 的 功能 很 丰富 ， 这 里 将 和 大 家 一 起 了 解 
背后 的 机 制 。 图 14-1 是 Chromium 浏 览 器 的 开发 者 工具 调试 网 页 的 界面 


— 一 一 
/ “意图 。 


这 将 会 是 一 个 系列 ,该 系列 的 介绍 方式 会 以 一 

多 进程 模型 ， 消 息 处 理 ，IPC 等 等 ,每 个 专题 > 

各 个 模块 的 架构 和 设计 ， 以 及 它们 是 如 何 工作 

根据 这 些 专题 所 涉及 的 内 容 ， 大 概 把 它们 分 为 
ow 发 话题 ， 下 面 是 这 个 系列 的 具体 内 容 目录 ,未 
108% 1 Baa 


后 端 一 被 调试 网 页 


前 端 一 调试 器 的 用 户 界面 


图 14-1 ”使 用 开发 者 工具 调试 网 页 的 用 户 界面 


图 14-1 主 要 包括 上 下 两 个 部 分 ， 上 半 部 分 表示 需要 被 调试 的 网 
页 ， 下 半 部 分 表示 调试 器 的 界面 ， 该 界面 是 由 WebKit 提 供 的 ， 这 也 就 
是 说 ， 使 用 了 WebKit 的 内 核 就 可 以 看 到 类 似 的 界面 ， 不 同 点 在 于 
Chromium 使 用 了 多 进程 架构 。 根 据 WebKit 中 的 定义 ， 上 面 的 部 分 称 为 
后 端 (Backend) ， 下 面 的 部 分 称 为 前 端 (Frontend) ， 这 一 叫 法 会 一 
直 贯 穿 整个 章节 。 


图 14-1 还 有 一 个 显著 的 特点 ， 那 就 是 调试 器 的 界面 本 身 也 是 使 用 
HTML、CSS 和 JavaScript 技 术 来 编写 的 ， 听 起 来 很 酷 吧 ?” 后 面 会 详细 
介绍 调试 器 的 工作 方式 。 


Chromium 开 发 者 工具 提供 了 众多 的 功能 ， 主 要 包括 以 下 几 种 。 


。 元 素 审查 (Elements) : 该 功能 能 够 帮助 开发 者 查看 每 一 个 
DOM 元 素 ， 如 图 中 查看 “body” 元 素 ， 同 样 可 以 查看 它 的 样式 信 
息 。 

。 资源 (Resources) : 该 功能 能 够 帮助 开发 者 查看 各 种 资源 信 
B, WAHRE, Cookien BARGE 


。 网络 (Network) : 该 功能 能 够 帮助 开发 者 了 解 和 诊断 网 络 功能 
和 性 能 ， 这 个 在 第 4 章 中 曾经 使 用 过 。 

e JavaScript 代 码 (Sources) : 就 是 调试 JavaScript 代 码 ， 同 其 他 语 

言 的 调试 器 一 样 ， 它 能 够 设置 断 点 、 单 步调 试 JavaScript 语 句 等 。 

时 间 序 列 (Timeline) : 该 功能 能 够 按照 时 间 次 序 来 收集 网 页 消 

耗 的 内 存 、 绘 制 的 帧 数 和 生成 各 种 事件 ， 帮 助 开发 者 分 析 网 页 性 

能 。 

性 能 收集 器 (Profiles) : 它 能 够 收集 JavaScript 代 码 使 用 CPU 的 

情况 、JavaScript 堆 栈 、CSS 选 择 器 等 信息 ， 以 帮助 开发 者 分 析 网 

页 的 运行 行为 。 

诊断 器 (Audits) : 这 是 帮助 开发 者 分 析 网 页 可 能 存在 的 问题 或 

者 可 以 改善 的 地 方 。 

控制 台 (Console) : 该 控制 台 可 以 输入 JavaScript 语 句 ， 由 

JavaScript 引 擎 计算 出 结果 。 插件 “PageSpeed”: 笔者 自行 安装 的 

帮助 分 析 网 页 性 能 问题 的 工具 ， 它 能 够 帮助 全 方位 分 析 各 种 可 能 

的 优化 点 ， 它 不 是 Chromium 浏 览 器 的 默认 功能 ， 而 是 需要 开发 者 

自己 去 Chrome Web Store 或 其 他 地 方 下 载 。 


14.1.2 ”协议 


调试 机 制 的 前 端 和 后 端 通过 使 用 一 定格 式 的 数据 来 进行 通信 ， 这 
些 数据 使 用 JSON 格 式 来 表示 。 具 体 到 如 何 理解 数据 的 内 容 ， 那 就 是 
Web Inspector 使 用 的 特殊 调试 协议 ， 该 协议 定义 了 如 何 理 解 双 方 发 送 
的 数据 内 容 。 在 WebKit 中 ， 协 议 被 定义 在 Inspector.json 文 件 中 (Blink 
则 是 protocol.json 文 件 ) ， 而 遵照 该 协议 传输 的 数据 同样 使 用 JSON 格 
式 ， 下 面 将 详细 分 析 该 协议 。 


14-2 % Œ X Web Inspector 的 前 端 和 后 端 交 互信 息 的 协议 ， 如 上 
面 所 说 ， 该 协议 使 用 的 是 一 个 JSON 格 式 的 文档 。 从 全 局 来 看 ， 协 议 中 
主要 包括 两 个 属性 ， 一 个 是 “version”， 用 来 表示 协议 的 版 本 号 ，Web 
Inspector 有 多 个 版 本 ， 需 要 注意 的 是 版 本 的 兼容 性 问题 ， 图 14-2 中 显 
示 的 是 版 本 1.0。 另 一 个 是 “domains”， 它 定义 了 多 个 协议 细节 ， 并 包含 
了 多 个 “domain”， 一 个 “domain” 通 常 是 一 类 功能 ， 如 “memory”、 


“CSS” 等 。 下 面 再 来 了 解 “domain” 的 定义 。 


"version": f "“majar™s: PIM, 
"domains": [ 
{ 

"domain"s "GSSs"; 
"hidden": "true", 
“descripimon™: Ys 
"types": [ 

{ 

"id": "StyleSheetId", 
"type": 


Fr 


"SEring”™ 


] 
"commands": [ 

{ 

"name": "toggleProperty", 

"parameters": [ 

{ "name": "styleId", 
{ "name": "propertyIndex", 
{ "name": "disable", 


] r 


"returns": [ 


{ "name": "style", "Sref": 
Jy 
"description™s Tas.” 
} ， 
lh 
MEVENES" ¢ 
{ 


"name": "styleSheetChanged", 


"parameters": [ 
{ "name": "styleSheetId", 


] r 


"desctiption"a Tess” 


"minor 


"Srek "o 


"type" 


"Sret": 


": "o" }, 


"CSSStyleId" }, 
"type": "integer" }, 


: "boolean" } 


"CSSStyle", "description": 


"StyleSheetId” } 


图 14-2 Web Inspector 的 协议 定义 


一 个 "domain”" 包 括 6 个 属性 ， 前 三 个 比较 简单 ， 容 易 理 解 ， 
个 比较 复杂 ， 较 难 理解 。 下 面 着 重 介绍 后 面 三 个 属性 。 


后 面 


第 一 个 是 "types”， 它 有 点 像 预先 定义 的 类 型 ， 这 些 类 型 表示 一 些 
特定 的 数据 ， 在 后 面 的 定义 中 可 以 声明 使 用 这 些 类 型 来 表示 一 定 
的 数据 结构 ， 例 如 图 中 定义 “id” 为 “StyleSheetId”， 它 表示 的 是 一 
个 字符 串 。 在 第 二 个 属性 “commands” 中 可 以 看 到 对 它们 的 引用 。 
第 二 个 属性 “commands” 定 义 “domain” 中 包含 的 所 有 命令 ， 这 些 命 
令 类 似 于 远程 过 程 调 用 ， 表 示 前 端 和 后 端 之 间 发 送 请 求 并 响应 的 
方式 。 如 图 中 的 “toggleProperty” 就 是 一 个 命令 的 定义 ， 可 以 看 到 
它 定 义 了 参数 的 名 称 和 类 型 ， 对 于 第 一 个 参数 它 引 用 了 
“CSSStyleIld”， 这 就 是 之 前 定义 在 “types” 中 的 一 个 类 型 (图 中 没 
有 写 出 来 ) 。 该 命令 还 包括 一 个 或 者 多 个 返回 值 ， 跟 参数 类 似 的 
定义 。 

最 后 一 个 属性 是 “events”"， 它 是 用 来 描述 事件 的 ， 同 样 可 以 包含 一 
个 或 者 多 个 事件 ， 主 要 是 向 对 方 发 送 当 前 的 一 些 状态 信息 ， 与 命 
令 不 同 的 是 ， 它 没有 也 不 需要 返回 值 。 图 中 所 示 是 一 个 表示 样式 
表 变 化 的 事件 。 


上 面 介 绍 的 都 是 一 些 抽象 的 定义 ， 下 面 通过 一 个 具体 的 例子 说 明 
一 下 ， 估 计 读 者 就 能 理解 透彻 了 。 图 14-3 是 用 户 单 击 取消 一 个 CSS 属 
性 (也 就 是 使 它 不 再 生效 ) 的 时 候 ，WebKit 背 后 发 生 的 各 种 函数 调用 
和 时 间 派 发 的 过 程 ， 实 际 上 是 一 系列 的 JSON 格 式 的 数据 ， 而 这 些 数据 
当然 是 遵守 上 面 协议 中 的 具体 定义 的 。 


(2ni-> his: {"method": "CSS.toggleProperty", "params": {"styleld": {"styleSheetId": "9","ordinal": 0}, "propertyIndex": 0, 


"disable": true}. "id": 1532} 


"oi 


{"method": "DOM.attributeModified", "params": {"nodeld": 58, "name": "style", "value": 


后 背 -> 前 端 : * color: red; */n"}} 


{"method": "CSS. styleSheetChanged", "params": {"styleSheetId": "9"} } 


后 端 -> 前 端 : 


Hèm: {"result": {"style": {"cssProperties": [{}]}}, "id": 1532} 


后 站 -> 亲 病 :fmethod": "DOM. inlineStyleInvalidated", "params": {"nodelds": [58]} } 


(2u-> hig: {"method": "CSS.getComputedStyleForNode", "params": {"nodeld": 58}, "id": 1533} 


{"method":"CSS.getInlineStylesForNode","params": {"nodeId":58} "id": 1534} 


前 器 -> 后 {"method":"DOM.markUndoableState","id": 1535} 


\ifSiu-> Jasin: {"method": "CSS.getComputedStyleF orNode", "params": {"nodeld": 58}, "id": 1536} 


Hi->: {"method":"CSS.getInlineStylesForNode","params": {"nodeld":58},"id": 1537} 


Hi-> tii: {"method":"DOM. getAttributes","params": {"nodeld":58 },"id": 1538} 


调 端 -> 后 端 : {"method": "CSS. getPlatformFontsForNode", "params": {"nodeld": 62}, "id": 1539} 


hidi-> iii: {"result": {"computedStyle": [{"name": "background-attachment", "value": "scroll"}, {"name": "background-clip", 
"value": "borde]}. "id": 1533} 
>ii: {"result": {"inlineStyle": {} },"id":1534} 
Wa 2ia-> fi in: {"result": {},"id":1535} 
iii: {"result": {"computedStyle":[ {]}."id":1536} 

(Si: {"result":{"inlineStyle"id":1537} 

‘iy: {"result":{"attributes": ["style","n * color: red; */n"]},"id":1538} 
hadii-> i: {"result":{"cssFamilyName":"'Times New Roman" ,"fonts":[]},"id":1539} 


图 14-3 Web Inspector 取 消 CSS 属 性 值 涉 及 的 前 后 端 信息 交换 


aaa Aras nea 在 WebKit 内 部 其 实 已 
经 发 生 了 多 个 消息 的 传递 ， 这 其 中 包含 命令 和 事件 ， 也 包括 返回 值 。 
ee 然后 对 每 条 消息 ， 
笔者 都 加 入 了 标注 表示 是 前 端 到 后 端 或 者 后 端 到 前 端 来 方便 理解 ， 后 
面 使 用 “{}” 括 起 来 的 部 分 就 是 实际 传输 的 数据 。 


第 一 个 数据 就 是 从 前 端 到 后 端的 命令 ， 其 含义 是 将 “id” 为 “9” 的 样 
sti DRE CENDRIER, 根据 图 14.2 中 的 定义 ， 该 命令 需 


要 返回 值 ， 为 了 标记 返回 值 ， 在 发 送 JSON 效 据 的 时 候 ， 附 加 了 一 个 
“id" 为 “1532” 的 标记 ， 这 样 ， 当 后 端 发 送 返 回 值 的 时 候 ， 前 端 就 能 够 
知道 这 是 哪个 请 求 的 回复 ， 而 不 会 出 现 理解 错误 的 情况 。 所 以 ， 对 于 
不 需要 返回 值 的 命令 或 者 本 身 就 没有 返回 值 的 事件 而 言 ， 就 不 需要 这 
样 的 “id” 标 记 。 例 如 ， 第 二 和 第 三 条 就 是 从 后 端 到 前 端的 数据 ， 就 是 
一 个 DOM 属 性 改变 的 事件 ， 其 中 并 不 包含 这 样 的 标记 信息 。 


第 四 条 就 是 第 一 条 命令 的 返回 值 ， 如 前 所 述 ， 包 含 了 返回 数据 和 
第 一 条 命令 的 标记 。 后 面 基本 上 是 因为 样式 变化 带 来 的 请 求 ， 原 理 同 
上 面 所 说 的 非常 类 似 ， 由 此 过 程 可 以 看 出 ， 用 户 一 个 简单 的 操作 ， 需 
要 带 来 前 后 端 大 量 的 操作 ， 其 中 这 些 命令 主要 是 前 端 发 送 给 后 端 ， 而 
事件 主要 是 后 端 告 诉 前 端 当 前 的 一 些 状态 信息 。 


14.1.3 ”WebKit 内 部 机 制 


介绍 了 Web Inspector 的 协议 和 基本 工作 方式 之 后 ， 下 面 有 必要 深 
入 到 WebKit 和 Chromium 代 码 中 来 理解 它们 内 部 的 工作 机 制 ， 本 节 主 要 
介绍 WebKit 中 的 基础 设施 ， 包 括 前 后 端的 支持 情况 。 前 面 介 绍 了 前 后 
端 只 是 通过 消息 传递 来 完成 调试 功能 的 ， 不 依赖 于 其 他 框架 ， 所 以 这 

将 重点 介绍 架构 中 是 如 何 发 送 、 接 收 消息 及 其 支撑 的 架构 ， 首 先 
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看 前 

调试 器 界面 本 身 也 是 使 用 Web 技 术 来 实现 的 ， 前 面 介 绍 的 所 有 功 
能 都 是 使 用 最 新 HIML5 技 术 来 完成 的 ， 目 前 有 两 个 接口 需要 具体 
WebKit 移 植 的 实现 ， 第 一 是 发 送 消 息 到 后 端的 接口 ， 第 二 是 从 对 方 接 
收 消息 后 ， 将 消息 派发 给 调试 器 。 图 14-4 是 webInspector 前 端的 主要 结 
构 和 基础 设施 。 
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图 14-4 ”WebInspector 前 端的 主要 结构 


最 上 层 的 是 Inspector.html， 也 就 是 读者 看 到 的 调试 器 主 界面 ， 完 
全 采用 HTML5 技 术 。 因 为 调试 器 包含 众多 的 功能 ， 所 以 它 实 际 上 使 用 
了 各 种 功能 的 JavaScript 人 代码。 在 其 典型 的 三 个 JavaScript 文 件 中 ， 首 先 
是 InspectorFrontendAPI， 它 是 前 端的 公共 接口 ， 被 上 层 的 调试 器 包含 
的 JavaScript 代 码 使 用 ， 同 时 该 类 也 包括 公共 的 派发 消息 的 接口 ， 然 后 
是 inspectorjs， 它 是 一 个 总 的 入 口 ， 包 括 所 有 主要 对 象 的 创建 ;而 
InspectorBackend.js 是 一 个 背后 的 具体 实现 类 ， 它 能 够 提供 接口 来 将 消 
息 发 送 到 被 调试 的 网 页 ， 也 就 是 后 端 。 


调试 器 主要 需要 两 个 能 力 ， 一 是 发 送 消息 给 前 端 ， 二 是 接收 后 端 
的 消息 。 这 两 个 接口 在 WebInspector 框 架 中 被 定义 ， 图 14-4 中 左边 就 是 
发 送 消 息 给 前 端的 过 程 。 Web Inspector 使 用 一 个 称 为 
InspectorFrontendHost 的 类 作为 接口 ， 当 然 它 本 身 没有 具体 实现 。 在 一 
般 的 情况 下 (如 为 远程 调试 ， 则 稍 有 不 同 ， 后 面 会 介绍 ) ， 


InspectorFrontendHost 是 一 个 使 用 C++ 编写 的 接口 类 ， 它 通过 V8 的 绑 定 
机 制 来 实现 ， 最 后 会 调用 到 InspectorFrontendHost， 之 后 就 依赖 于 具体 
移植 的 实现 了 。 另 外 一 个 接口 就 是 定义 了 派发 消息 的 JavaScript 接 口 ， 
也 就 是 InspectorFrontendAPI.js 定 义 的 派发 消息 的 两 个 接口 ， 在 Web 
Inspector 中 ， 一 个 默认 的 实现 是 InspectorClient 类 中 有 一 个 静态 方法 ， 
该 方法 使 用 ScriptController 类 ， 将 通过 C++ 代码 获得 的 消息 传 入 
JavaScript 代 码 ， 这 样 整个 前 端 依 赖 的 两 个 本 地 接口 就 得 到 了 完美 地 实 
现 ， 不 仅 如 此 ， 该 结构 还 能 很 好 地 满足 之 后 的 远程 调试 的 需求 ， 是 非 
常 棒 的 结构 。 


前 端 介 绍 完 之 后 就 是 后 端 ， 如 图 14-5 描 述 的 后 端 所 需要 的 主要 类 
和 它们 的 关系 。 同 前 端 不 一 样 的 是 ， 后 端的 主要 功能 都 是 使 用 C++ 代 
码 来 完成 的 ， 其 中 最 重要 的 类 是 InspectorController， 它 控制 着 后 端的 
所 有 动作 及 其 和 被 调试 网 页 之 间 的 联系 。InspectorClientroller 类 包含 一 
个 InspectorClient 对 象 ， 该 对 象 负责 实现 基础 功能 ， 如 情况 缓存 、 高 亮 
等 。 同 时 ， 它 包含 一 个 主要 的 对 外 接口 ， 那 就 是 
dispatchMessageFromFrontend 类 ， 它 由 WebKit 移 植 将 前 端的 消息 传递 
给 后 端的 时 候 被 调用 ， 这 些 消 息 都 是 由 InspectorBackendDispatcherImpl 
这 个 自动 生成 类 处 理 的 ， 这 个 类 能 够 处 理 所 有 的 请 求 消息 ， 并 解析 这 
些 消息 ， 然 后 转换 成 相应 的 C++ 对 象 和 函数 的 调用 。 可 是 怎么 做 到 这 
一 点 的 呢 ? 很 简单 ， 每 个 “domain” 都 会 有 相应 的 称 为 CommandHandler 
的 类 ， 如 图 中 CSSCommandHandler 类 。 每 个 类 的 对 象 都 会 注册 到 
InspectorBackendDispatcherImpl 对 象 中 ， 根 据 图 14-3 所 述 的 消息 ， 该 对 
象 很 容易 知道 调用 的 “domain”、 命 令 或 者 事件 等 。 
InspectorBackendDispatcherImpl 类 也 能 够 同 V8 等 JavaScript 引 擎 交互 ， 
典型 的 应 用 就 是 审查 (Inspect) 一 个 元 素 ， 用 户 单 击 一 个 元 素 的 时 候 
(可 以 从 后 端的 被 调试 网 页 中 单 击 ) ，JavaScript 引 擎 接收 到 事件 ， 然 


后 处 理 并 调用 该 类 来 处 理 。 本 身 CommandHandler 类 包含 一 些 接口 ， 以 
中 CSSCommandHandler 类 为 例 ， 它 的 具体 实现 类 是 
InspectorCSSAgent， 借 助 于 一 些 其 他 设施 类 ， 它 能 够 知道 被 调试 网 页 
有 关 CSS 方 面 的 信息 ， 如 借用 InspectorStyleSheet 类 。 


| gent 


| CSSCommandHandler | 
eee leSheet > nspectorCSSAgent | ent | 
= 
| Engine 
[ina pectorBankendDiapatcherimpl |< <--- 
| InspectorAgentRegistry | entRegist ro | es 
-m -magens | PONE i pe | -> ES 


- 


—— Insp | InspectorFrontendChannel | 
+highlight() = +dispatchMessageFromF rontend() | +sendMessageT oF rontend(} 


14-5 ”WebInspector 后 端的 主要 结构 


图 中 的 InspectorBaseAgent 是 > 持 所 有 功能 的 子 类 ， 由 于 Web 
Inspector 需 要 众多 功能 ， 如 前 面 介 绍 的 CSS、 内 存 、 性 能 等 ， 所 有 这 些 
功能 都 是 基于 该 类 实现 的 ， 这 些 类 的 对 象 使 用 一 个 注册 类 来 管理 ， 如 
中 的 InspectorAgentRegistry 类 。 


以 与 CSS 相 关 的 Agent 为 例 ， 该 类 被 调用 后 能 够 做 正确 的 处 理 并 按 
需 返 回 相 应 的 结果 。 但 是 ， 这 里 不 进行 消息 的 编码 ， 而 是 使 用 一 
InspectorFrontend 自 动 生成 类 来 帮助 这 些 C++ 对 象 和 数据 转换 成 JSON 格 
式 的 数据 。 


另外 一 方面 就 是 后 端 发 送 消 息 到 前 端 ，WebKit 定 义 了 一 个 抽象 接 
口 就 是 InspectorFrontendChannel 类 。 顾 名 思 义 ， 它 就 是 一 个 传输 通 


道 ， 所 有 后 端 到 前 端的 消息 都 是 从 它 传 出 的 ， 消 息 本 身 不 做 任何 转 
换 ， 只 是 传输 数据 。InspectorFrontend 是 一 个 自动 生成 的 类 ， 这 里 是 一 
个 模拟 前 端的 工具 类 ， 由 于 它 是 一 个 根据 协议 自动 生成 的 类 ， 后 端 调 
用 协议 中 定义 的 方法 和 事件 ， 而 该 类 提供 这 些 接口 并 将 调用 转变 成 
JSON 格 式 ， 包 括 命令 的 名 称 、 参 数 等 信息 。 转 换 后 的 JSON 字 符 串 通 
过 通道 传 出 ， 从 而 完成 了 消息 的 发 送 过 程 。 


通过 上 面 的 介绍 ， 相 信 读 者 已 经 推测 出 前 后 端 之 间 的 通信 框架 ， 
因为 WebKit 的 特殊 性 ，WebCore 只 是 提供 框架 ， 有 具体 实现 区 由 移植 来 
完成 。 图 14-6 是 基本 的 通信 框架 。 


InspectorFrontendAPI.js Inspector Controller 


+dispatchMessagel) +dispatchM essageF romFrontend() 


Inspector FrontendHost Inspector FrontendChannel 
ntend 


+sendMessageT oFrontend() = 
+sendMessageT oBackend (} 


1 
InspectorFrontendClient 


+sendMessageToBackend () 


14-6 ”WebInspector 的 前 后 端 通信 框架 示意 


图 中 左边 是 前 端 ， 右 边 是 后 端 ， 通 信 框 染 主 要 定义 前 后 端的 一 些 
用 来 双向 通信 的 基础 类 和 提供 的 接口 。 这 些 接口 需 依赖 实际 的 通信 机 
制 才 能 完成 ， 设 想 一 下 如 果 前 后 端 都 工作 在 一 个 进程 中 ， 那 么 非常 简 
单 ， 只 需 将 消息 传递 到 另 一 线程 中 即 可 ， 不 需要 复杂 的 机 制 。 不 过 ， 
这 里 它 只 是 定义 了 抽象 接口 ， 而 没有 定义 通信 方面 的 具体 规定 ， 这 为 
跨 进程 的 调试 机 制 和 远程 调试 提供 了 可 能 。 


14.1.4 ”Chromium 开发 者 工具 


Chromium 开 发 者 工具 (通常 见 到 的 称谓 是 DevTools) 是 基于 Web 
Inspector 机 制 的 一 套 跨 进程 的 调试 工具 ， 具 体 用 法 笔者 稍 后 会 介绍 ， 
这 里 先 来 理解 它 是 如 何 基 于 Web Inspector 来 实现 的 。 


因为 Chromium 的 多 进程 架构 ， 后 端 中 被 调试 的 网 页 是 一 个 
Renderer 进 程 ， 前 端的 网 页 同样 也 是 一 个 Renderer 进 程 。 根 据 前 面 Web 
Inspector 的 架构 ，Chromium 所 要 做 的 是 将 前 后 端的 通信 机 制 连接 起 
来 。 由 于 Chromium 架 构 的 特殊 性 ， 消 息 的 传递 实际 上 经 过 了 一 个 中 转 
站 ， 那 就 是 Browser 进 程 ， 也 就 是 说 这 两 个 Renderer 进 程 不 是 直接 通信 
的 ， 而 是 将 消息 传递 给 Browser 进 程 ， 由 它 再 派发 给 相应 的 Renderer 进 


程 。 


14-7 描 述 了 Chromium 支 持 多 进程 调试 的 整个 架构 ， 上 半 部 分 是 
前 端 和 后 端 两 个 Renderer 进 程 ， 而 下 半 部 分 是 Browser 进 程 ， 整 个 架构 
可 以 说 非常 简洁 明确 。 首 先 来 看 前 端的 接收 和 发 送 消息 是 如 何 被 支持 
的 。 首 先是 Chromium 对 前 端 发 送 消息 到 后 端的 支持 。WebKit 中 的 基 类 
InspectorFrontHost 类 其 实 是 调用 InspectorFrontendClient 类 来 发 送 消息 
的 tf WebKit AY Chromium 移植 做 了 一 个 具体 的 实现 类 Inspector- 
FrontendClientImpl 类 ， 该 类 会 调用 WebDevToolsFrontendImpl 类 。 最 后 
的 跨 进 程 通信 类 是 content::DevToolsClient， 该 类 是 Chromium 项 目 中 用 
于 开发 者 工具 的 进程 间 通 信 类 。 然 后 是 Chromium 对 前 端 接收 来 自 后 端 
消息 的 支持 . 当 WebDevToolsFrontendImpl 类 接收 到 
content::DevToolsClient 传 递 过 来 消息 的 时 候 ， 它 直接 通过 V8 提供 的 机 
制 调用 InspectorFrontendAPI.js 的 dispatchMessage 方 法 。 经 过 这 一 过 
程 ，Chromium 已 经 将 WebInspector 的 两 个 用 于 传递 消息 的 接口 实现 
To 
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-m_client : 不 
i 1 
InspectorFrontendClientimp! : inspectorController 
i +dispatchMessageFromF ronten... 
7 i > InspectorFrontend 
A Vv H A Channel 
InspectorFronten WebDevToolsFrontendimp! i WebDevToolsAgentimp! >\+sendMessageToFr.. 
dAPl.js = +dispatchOnInspectorFrontend() i +dispatchOnInspectorBackend() 
ME: Renderer 进程 1 i 后 端 : Renderer 进程 2 
AU Am: Renderer KENE WebDevToolsFrontend : WebDevToolsAgentClient 
+dispatchOninspectorFrontend() i +dispatchOnInspectorBackend() 
A 
1 
H 上 
content::DevToolsClient ! content:: DevToolsAgent 
-web_tools_frontend 
sneer Ee 
i DevToolsFrontendHost RenderViewDevToolsAgentHo IPCDevToolsAgent 
Browser 进 各 +DispatchOnInspectorFrontend() st Hy Host 
DevToolsClientHost DevToolsAgentHostimpl 
+DispatchOnInspectorFrontend() 
不 v A y 
DevToolsManagerimpl 
-client_to_agent_host 
-agent_to_client_host 


图 14-7 Chromium DevTools 多 进程 架构 


A dS aus 


接 下 来 是 Browser 进 程 ， 每 个 前 端 进程 都 有 一 个 相应 的 DevTools- 
FrontendHost 对 象 。 当 前 端的 一 个 消息 到 达 时 ， 如 何 找到 其 相应 的 后 端 
WE? 答案 是 DevIoolsManagerImpl 类 ， 它 管理 了 所 有 的 “前 后 端 对 ”， 实 
际 上 包含 了 两 个 哈 希 表 ， 第 一 个 是 从 前 端 到 后 端的 映射 ， 第 二 个 是 相 
反方 向 的 映射 。 有 了 这 两 个 哈 希 表 ， 一 切 就 很 简单 了 ，Browser 进 程 只 
是 将 前 端的 消息 根据 映射 关系 找到 后 端 并 传递 给 它 ， 相 反方 向 也 是 一 
样 的 ， 这 就 是 图 14-7 中 描述 的 过 程 。 


最 后 是 后 端 进程 的 工作 过 程 。content::DevToolsAgent 也 是 负责 同 
Browser 进 程 交 互 消息 的 具体 实现 类 ， 包 括 接收 和 发 送 。 在 这 之 上 主要 
Æ WebKit 的 Chromium 移植 提供 的 接口 ， 其 具体 的 实现 是 通过 
WebDevToolsAgentImpl 类 ， 它 会 将 接收 的 消息 传递 给 
InspectorController， 至 此 ，Chromium 连 接 上 WebKit 中 后 端 接收 消息 的 
处 理 机 制 。 而 对 于 发 送 消息 ， WebDevToolsAgentImpl 是 


InspectorFrontendChannel 的 子 类 , A K Hl sendMessageToFrontend 接 
口 。 这 样 ， 双 向 过 程 完整 地 得 到 了 支持 。 


14.1.5 “远程 调试 


何谓 远程 调试 (Remote Debugging) ? 刚刚 上 面 介 绍 的 都 是 在 同 
一 个 浏览 器 中 的 进程 ， 虽 然 可 能 在 不 同 的 进程 中 。 远 程 调试 是 指 前 端 
和 后 端 在 不 同 的 浏览 器 实例 中 ， 但 这 两 个 实例 可 能 在 同一 个 环境 中 ， 
也 可 能 在 不 同 的 环境 中 。 例 如 ， 两 台 机 器 ， 甚 至 网 络 上 的 两 个 设备 。 


根据 前 面 描 述 的 Web Inspector 机 制 ， 本 身 wWeb Inspector 机 制 没 有 
定义 通信 的 方式 ， 而 且 前 后 端 只 是 通过 JSON 消 息 和 一 定 的 协议 来 交互 
的 ， 所 以 从 理论 上 来 讲 ， 远 程 调试 也 只 是 需要 建立 一 定 的 通信 方式 就 
能 够 支持 远程 调试 ， 好 消息 是 现在 已 经 得 到 实现 了 。 


Web Inspector 没 有 提供 或 者 规定 远程 调试 的 方式 ， 在 Chromium 
远程 调试 得 到 了 比较 好 的 支持 ， 其 具体 的 做 法 如 下 。 


首先 在 后 端 所 在 的 浏览 器 中 需要 建立 一 个 HTTP 服 务 器 ， 在 打 面 系 
统 上 ， 建 立 和 打开 TCP 监 听 一 个 端口 ， 如 9222。 然 后 在 另外 一 个 
Chromium 浏 览 器 实例 中 输入 “http:Wlocalhost:9222” 就 可 以 看 到 被 调 
试 的 网 页 。 目 前 ， 这 种 方式 并 不 支持 网 络 上 的 不 同 机 器 ， 可 能 是 
实现 者 考虑 到 安全 性 问题 。 如 果 调 试 Android 平 台 上 的 Chrome 浏 
览 器 中 的 网 页 ， 首 先 需要 将 Android 设 备 通过 USB 连 接 上 开发 机 
器 ， 这 时 候 用 户 可 以 在 Android 上 Chrome 浏 览 器 的 设置 中 打开 远 
程 调试 开关 ， 这 一 操作 实际 上 创建 了 一 个 Unix Domain Socket。 此 
时 ， 开 发 者 在 Linux 系 统 中 只 要 打开 Chrome 浏 览 器 〈 必 须 大 于 版 


x 


本 33) 并 在 地 址 栏 输入 “chrome:/respect” 就 能 够 看 到 需要 调试 的 
网 页 了 。 

建立 连接 之 后 ， 通 过 HTTP 协 议 将 被 调试 网 页 的 HTML、CSS 和 JS 
等 资源 文件 从 被 调试 网 页 所 在 的 浏览 器 传输 到 前 端 调试 器 所 在 的 
网 页 中 。 

. 当 开 始 调试 时 ， 前 端 调试 器 会 尝试 使 用 Web Socket 建 立 前 端 和 后 
端 传输 消息 的 通道 。 这 是 一 种 基于 Web 的 新 技术 ， 能 够 建立 类 似 
于 套 接 字 的 数据 传输 通道 。 


Y 


= 


14-8 描 述 了 使 用 WebSocket 技 术 来 传输 调试 消息 的 远程 调试 机 
制 。 根 据 前 面 介绍 的 WebKit 中 前 端 和 后 端 传输 消息 的 机 制 ， 主 要 是 
InspectorFrontendHost (前 端 使 用 ) 和 InspectorFrontendChannel (后 端 
使 用 ) 这 两 个 类 ， 它 们 具体 的 实现 由 子 类 来 完成 ， 在 远程 调试 中 ， 通 
信 的 基础 设施 是 由 HTML5 的 WebSocket 技 术 来 支撑 的 ， 那 么 Chromium 
中 如 何 使 用 该 技术 呢 ? 道理 很 简单 ， 就 是 将 InspectorFrontendHost 接 口 
同时 暴露 到 JavaScript 中 ， 当 本 地 代码 需要 发 送 消息 的 时 候 ， 通 过 调用 
InspectorFrontendHost 类 的 本 地 接口 ， 而 这 个 本 地 接口 已 经 同 JavaScript 
中 的 实际 发 送 接 口 连 接 起 来 ， 这 样本 地 代码 中 的 消息 就 能 够 使 用 
WebSocket 技 术 来 发 送 了 ， 示 例 代 码 14-1 是 Chromium 中 连接 本 地 代码 
和 Javascript 代 码 发 送 消息 的 部 分 代码 节选 ， 这 个 代码 是 前 端的 代码 。 
而 对 于 接收 消息 ， 同 样 比较 简单 ，Chromium 将 WebSocket 的 onMessage 
事件 同 后 端的 消息 派发 函数 连接 起 来 ， 确 实 轻而易举 。 对 于 后 端 而 
言 ， 它 使 用 C++ 代码 来 完成 WebSocket 的 连接 ， 原 理 是 类 似 的 。 


Inspector FrontendHost Inspector FrontendChannel 
+sendMessageToFrontend() 
+sendMessageT oBackend (} 
I 1 
1 1 
| 


| 
| | 


WebSocket : frontend WebSocket: backend 


14-8 使 用 webSocket 技 术 的 远程 调试 


示例 代码 14-1 ”使 用 webSocket 建 立 连接 的 远程 调试 机 制 


WebInspector.loaded = function() { 

// 首先 构建 ws， 这 个 是 webSocket 的 URL， 下 面 是 创建 webSocket 对 象 

if (ws) { 

WebInspector.socket = new WebSocket (ws); 

// 接收 对 方 过 来 的 消息 ， 直 接 交 给 相应 的 模块 去 处 理 

WebInspector.socket.onmessage=function(message) { 
InspectorBackend.dispatch(message.data) ; } 

WebInspector.socket.onerror = function(error) { 
console.error(error); } 
WebInspector.socket.onopen = function() { 

// 当 连 接 打 开 后 ， 就 将 InspectorFrontendHost 的 发 送 消息 


InspectorFrontendHost.sendMessageToBackend = 


WebInspector.socket.send.bind(WebInspector.socket); 


WebInspector .doLoadedDone()/; 


} 


} 


Weinre 是 一 个 支持 远程 调试 功能 的 开源 项 目 ， 它 除了 能 够 支持 
WebInspector 协 议 ， 还 能 够 支持 Firebug (Firefox 的 调试 工具 ) 的 协 
议 ， 其 原理 也 是 类 似 的 ， 有 兴趣 的 读者 可 以 自行 查阅 相关 技术 文档 。 


14.1.6 Chromium Tracing 机 制 


Chromium 开 发 者 工具 能 够 帮助 Web 开 发 者 理解 网 页 运行 过 程 中 的 
行为 并 帮助 分 析 一 些 性 能 问题 。 但 是 ， 如 果 出 现 问题 ， 特 别 是 绘制 网 
页 的 时 候 ， 开 发 者 非常 希望 了 解 为 什么 Chromium 会 使 用 如 此 多 的 时 
间 ， 笔 者 相信 Chromium 开 发 者 工具 很 难 回答 这 样 的 问题 。 同 时 ， 对 于 
Chromium 的 开发 者 来 说 ， 如 果 需 要 分 析 Chromium 自 身 问题 ， 就 需要 
相应 的 工具 来 帮助 分 析 ， 在 Chromium 中 ，chrome://tracing 这 一 诊断 工 
具 能 够 满足 上 面 的 要 求 。 


这 是 一 个 基于 事件 收集 的 分 析 工 具 ， 它 能 够 帮助 诊断 一 些 WebKit 
和 Chromium 内 部 代码 在 绘制 网 页 过 程 中 存在 的 问题 ， 其 中 最 主要 的 还 
是 同 图 形 相关 的 操作 。 我 们 在 第 7 章 中 的 4.3 节 中 使 用 过 该 工具 来 分 析 
泻 染 过 程 。 

这 一 机 制 的 实现 采用 的 思想 非常 简单 ，Tracing 机 制 在 Chromium 代 


码 中 插入 相应 的 跟踪 代码 ， 然 后 计算 开始 和 结束 之 间 的 时 间 差 ， 虽 然 
简单 ， 但 是 非 党 有用， 上 典型 的 例子 如 下 所 示 。 


TRACE_EVENT_BEGINO("MY_SUBSYSTEM", "SomethingCostly" ) 
doSomethingCost1ly() 


TRACE_EVENT_ENDO("MY_SUBSYSTEM", "SomethingCostly") 


Tracing 机 制 在 某 个 动作 执行 前 加 入 “开始 事件 代码， 然后 在 动作 
结束 后 加 入 “结束 事件 ”人 代码， 机制 中 的 TRACE_EVENT 宏 自动 计算 获 
得 该 动作 执行 的 时 间 。 当 然 ， 一 般 典 型 的 例子 是 在 函数 或 者 一 段 代 码 
开始 的 时 候 加 入 TRACE_EVENT0， 在 该 函数 退出 时 候 ， 该 事件 自动 
记录 下 结束 的 时 间 ， 这 是 使 用 对 象 的 自动 析 构 机 制 来 完成 的 。 这 样 
Tracing 机 制 就 能 够 计算 出 该 函数 运行 所 需要 的 时 间 ， 而 不 再 需要 额外 
插入 结束 代码 ， 如 示例 代码 14-2 所 示 的 三 个 记录 点 。 


示例 代码 14-2 首 先 在 疯 数 入 口 处 创建 Tracing 对 象 并 记录 时 间 点 ， 
在 该 闲 数 退出 时 ， 对 象 析 构 前 就 能 够 自动 记录 整个 水 数 执行 的 总 时 
间 。 然 后 在 第 一 个 “if”*” 语 句 中 ， 又 加 入 了 一 个 记录 点 记录 了 这 种 条 件 下 
的 时 间 消 耗 ， 后 面 的 Tracing 对 象 也 是 同样 的 原理 。 


示例 代码 14-2 Chromium 合成 器 中 的 ThreadProxy 类 代码 片段 


bool ThreadProxy::CompositeAndReadback(void* pixels, 
gfx::Rect rect) { 
TRACE_EVENTO("cc", "ThreadProxy: :CompositeAndReadback") ; 
DCHECK(IsMainThread()); 


DCHECK(layer_tree_host_); 


if (defer_commits_) { 


TRACE_EVENTO("cc", "CompositeAndReadback_DeferCommit"); 


return false; 


if (!layer_tree_host_->InitializeOutputSurfacelIfNeeded( ) ) 


TRACE_EVENTO("cc", 
"CompositeAndReadback_EarlyOut_LR_Uninitialized"); 


return false; 


i 


在 第 7 章 中 ， 我 们 已 经 介绍 过 如 何 使 用 该 诊断 工具 来 收集 数据 ， 这 
里 不 再 重复 。 回 顾 图 7-15 中 chrome:Wtracing 收 集 的 一 段 时 间 内 的 跟踪 事 
件 集合 ， 开 发 者 可 以 看 到 各 个 进程 内 的 时 间 分 布 情况 ， 它 同时 也 显示 
了 各 个 线程 的 钞 数 调用 情况 ， 从 中 能 够 发 现 热点 区 域 ， 也 就 是 耗 时 特 
别 长 的 遂 数 。 该 工具 还 能 够 支持 保存 这 些 数据 ， 这 样 可 以 很 方便 地 传 
播 这 些 数据 ， 并 获得 他 人 的 分 析 帮 助 。 


14.2 ”实践 一 一 基础 和 性 能 调试 


Chromium 开 发 者 工具 基本 上 沿用 了 Web Inspector 的 功能 ， 所 以 这 
一 节 主 要 以 该 开发 者 工具 作为 介绍 的 对 象 ， 一 起 了 解 开 发 者 工具 提供 
的 功能 和 一 些 基本 的 用 法 ， 有 些 用 法 其 实在 之 前 已 经 介绍 过 ， 这 里 可 


能 为 了 系统 性 考虑 会 再 次 提 六 一 下 ， 但 是 不 做 太 多 的 重复 性 介绍 。 主 
要 包括 两 个 部 分 ， 基 础 功能 部 分 的 调试 和 性 能 部 分 的 调试 。 


14.2.1 ”基础 调试 


基础 部 分 的 调试 大 致 可 以 分 成 DOM 元 素 的 修改 等 访问 、CSS 样 式 
值 修 改 、 日 志和 控制 台 信息 ， 以 及 JavaScript 代 码 单 步调 试 、 断 点 设置 
等 部 分 功能 。 


开局 或 者 关闭 开发 者 工具 的 功能 快捷 键 是 F12 或 者 在 浏览 器 地 址 
最 右 侧 的 按钮 中 调用 开发 者 工具 即 可 。 还 有 一 个 直接 的 方法 就 是 右键 
单 击 一 个 HTML 元 素 ， 然 后 在 右键 菜单 中 能 够 找到 “Inspect Element” 选 
项 ， 那 就 是 审查 该 元 素 ， 这 种 方式 也 可 以 打开 开发 者 工具 ， 如 图 14-9 
是 使 用 该 选项 打开 开发 者 工具 并 显示 “Inspect Element” 选 项 所 做 的 
Chrome 浏 览 器 截图 。 
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图 14-9 “Inspect Element” 选 项 和 开发 者 工具 


当 开发 者 工具 被 打开 后 ， 开 发 者 就 会 发 现在 “Elements” 标 签 之 下 
显示 的 其 实 是 被 调试 页 面 的 源 代码 ， 同 时 ，Chromium 浏 览 器 会 高 亮 被 
审查 元 素 的 源 代码 ， 这 一 做 法 可 以 帮助 开发 者 获悉 当前 的 元 素 的 源 代 
码 。 右 侧 下 方 是 当前 元 素 的 CSS 属 性 值 ， 包 括 经 过 WebKit 计 算 之 后 应 
用 在 该 元 素 上 的 属性 值 和 支持 获得 这 些 属 性 值 的 规则 等 信息 ， 这 对 开 
发 者 而 言 非 常 方便 。 如 果 读 者 认为 只 是 显示 源 代 码 (DOM 结 构 ) 和 
CSS 属 性 值 的 话 ， 那 就 大 错 特 错 了 。 开 发 者 工具 的 方便 之 处 就 在 于 开 
发 者 可 以 任意 修改 源 代码 或 者 CSS 属 性 值 ， 而 且 这 些 修改 都 是 即时 显 
示 在 网 页 的 泻 染 结果 中 的 。 如 前 面 的 一 个 例子 就 是 取消 一 个 CSS 属 性 
值 ， 图 14-3 就 是 该 例子 背后 发 送 的 消息 ， 前 端的 修改 很 快 就 会 在 后 端 


结果 中 起 作用 ， 例 如 ， 将 字体 颜色 的 红色 值 取消 掉 ， 那 么 
变 成 默认 的 颜色 。 


另外 一 个 例子 就 是 在 图 14-9 左 边 的 源 代 码 中 (实际 是 DOM 树 的 一 
种 显示 方式 ) ， 开 发 者 可 以 随时 修改 任何 元 素 ， 包 括 它们 的 属性 ， 这 
些 修改 立刻 由 后 端 处 理 触发 重新 绘制 的 操作 。 这 一 切 对 网 页 开发 者 来 
说 是 透明 的 。 当 然 这 些 改动 只 是 针对 本 地 浏览 器 下 载 后 的 网 页 ， 并 不 
会 对 服务 器 端的 网 页 做 任何 修改 ， 因为 其 本 来 目的 也 是 帮助 调试 之 
用 。 


当然 ， 为 了 查看 网 页 的 DOM 结 构 和 网 页 中 的 各 种 对 象 ， 开 发 者 工 
具 提 供 了 命令 行 式 的 控制 台 ， 开 发 者 可 以 以 此 查看 任何 DOM 中 的 节点 
(这 个 在 第 5 章 中 也 使 用 过 控制 台 来 理解 DOM 树 结构 ) 和 各 种 对 象 
(包括 对 象 值 和 它 包 括 的 函数 ， 笔 者 经 常 使 用 它 来 查看 Chromium 支 持 
的 一 些 JavaScript 接 口 是 什 么 样 的 ， 因 为 不 同 浏览 器 对 于 接口 的 支持 也 
是 不 一 样 的 ) ， 甚 至 可 以 执行 JavaScript 语 句 。 图 14-10 是 开发 者 工具 控 
制 台中 的 两 个 示例 ， 第 一 个 是 查看 “geolocation” 对 象 相关 的 接口 ， 可 
以 看 到 这 个 对 象 包括 三 个 接口 。 第 二 个 是 查看 “window” 对 象 下 所 有 的 
其 他 对 象 ， 这 对 查看 编程 接口 也 有 一 定 的 帮助 。 
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图 14-10 ”开发 者 工具 的 控制 台 


控制 台 的 另外 一 个 功能 就 是 能 够 显示 所 有 的 JavaScript 代 码 执行 的 
日 志 信息 和 错误 信息 。 调 试 JavaScript 代 码 的 一 种 方式 是 使 用 日 志 打 印 
出 一 些 值 来 帮助 确定 代码 的 正确 性 ， 常 用 的 就 是 console.log 辆 数 ， 该 
汶 数 的 输出 都 可 以 在 控制 台中 看 到 。 


代码 的 调试 是 每 个 调试 器 必须 支持 的 功能 ， 在 网 页 中 就 是 对 
JavaScript 代 码 的 调试 功能 ， 包 括 单 步 、 设 置 或 取消 断 点 、 调 用 栈 、 变 
量 信息 等 ， 这 些 都 在 “Sources” 标 签 中 得 到 了 支持 。 图 14-11 是 开发 者 工 
具 中 的 JavaScript 代 码 调试 器 。 
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» _addT]: function _ad_ 


un: 
for (var i = @; i < u.length; i++) { » Global Window 
_addTI(u[i]); vw Breakpoints 
} 3 F 
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图 14-11 开发 者 工具 的 JavaScript 调 试 器 


左 侧 是 当前 网 页 的 所 有 包含 JavaScript 代 码 的 文件 ， 中 间 是 当前 代 
码 和 调试 的 位 置 ， 开 发 者 可 以 单 击 左 侧 的 行 数 设置 或 者 取消 断 点 ， 网 
页 就 能 够 在 执行 到 该 行 的 时 候 停 下 来 。 右 侧 最 上 面 是 控制 执行 的 各 种 
按钮 ， 包 括 继续 执行 、 单 步 执 行 、 进 入 内 部 、 跳 出 等 。 下 面 则 是 各 种 
言 息 ， 包 括 碍 看 的 变量 值 、 调 用 栈 、 当 前 作用 域 中 的 变量 值 、 断 点 信 
息 等 。 所 以 ， 这 个 调试 功能 跟 其 他 语言 调试 器 比较 类 似 。 


值得 一 提 的 是 ， 其 实 这 个 网 页 的 代码 都 是 在 一 行 的 ， 所 以 看 起 来 
非常 吃力 和 不 方便 ， 对 此 现象 Chromium 提 供 了 一 个 很 方便 的 功能 ， 能 
够 将 这 些 代码 从 一 行 变 成 可 读 性 非常 强 的 代码 ， 就 是 图 14-11 所 示 的 结 
BR (原来 所 有 JavaScript 代 码 都 在 一 行 ， 非 常 难 懂 ) ， 具 体 的 做 法 是 在 
开发 者 工具 的 最 下 面 找到 “{}” 按 钮 ， 单 击 即 可 ， 非 常 实用 。 


14.2.2 ”性 能 调试 


除了 修改 网 页 的 DOM 结 构 和 和 CSS 样式， 以 及 调试 JavaScript 代 码 之 
外 ， 开 发 者 工具 还 能 够 帮助 网 页 开发 者 改善 性 能 和 内 存 等 方面 的 问 
题 。 性 能 方面 包括 网 络 资源 的 加 载 性 能 、 网 页 绘制 的 性 能 ， 甚 至 包括 
根据 网 页 加 载 和 泻 染 过 程 给 出 一 些 优化 建议 。 内 存 方 面 主 要 是 网 页 使 
用 的 总 内 存 、JavaScript 引 擎 堆栈 内 存 使 用 情况 等 方面 的 信息 。 


首先 来 看 性 能 方面 。 关 于 网 络 资源 加 载 的 分 析 和 网 页 绘制 在 第 4 章 
和 第 8 章 中 做 过 一 些 介绍 ， 其 基本 功能 已 经 展示 出 来 了 。 这 些 功 能 只 是 
开发 者 可 能 需要 解决 的 一 部 分 问题 ， 开 发 者 工具 还 提供 了 一 种 能 够 收 
集 整 个 网 页 工作 过 程 中 的 一 段 时 间 内 各 个 JavaScript 代 码 消耗 时 间 的 分 
布 情况 。 开 发 者 先是 选择 “Profiles” 标 签 ， 然 后 选择 “Collect JavaScript 
CPU profile”" 按 钮 ， 此 时 开发 者 工具 将 收集 被 调试 网 页 重新 加 载 的 整个 
过 程 中 CPU 消耗 在 各 个 JavaScript 模 块 的 时 间 分 布 ， 如 图 14-12 所 示 。 
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214-12 ”使 用 开发 者 工具 收集 的 CPU 时 间 分 布 图 


其 中 (program) ”是 主 网 页 的 HTML 文 件 所 消耗 的 时 间 ， 因 为 
HTML 文 件 中 内 骨 了 很 多 JavaScript 人 代码， 所 以 它 占 据 了 绝 大 部 分 时 
间 ， 而 其 他 一 些 JavaScript 文 件 则 只 占用 了 很 少 的 执行 时 间 ]。 


还 有 一 个 非常 有 用 的 能 力 ， 就 是 使 用 开发 者 工具 中 的 “Audits” 功 
能 ， 图 14-13 展 示 了 “Audits” 分 析 一 个 网 页 所 生成 的 结果 ， 它 明确 了 4 个 
关于 网 络 方面 和 1 个 关于 网 页 泻 染 性 能 方面 的 问题 可 以 进行 优化 ， 这 对 
改善 网 站 性 能 来 说 是 一 个 极 大 的 福音 。 
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图 14-13 ”开发 者 工具 的 “Audits” 功 能 


其 次 来 看 关于 内 存 性 能 分 析 功 能 。 如 前 所 述 ， 开 发 者 工具 不 仅 提 
供 了 网 页 整体 使 用 内 存 的 情况 ， 也 提供 了 分 析 JavaScript 引 擎 内 部 堆 上 
的 内 存 使 用 情况 。 图 14-14 是 笔者 在 单 击 “ 开 始 ” 按 钮 之 后 ， 重 新 加 载 网 
页 所 收集 的 内 存 使 用 情况 ， 它 是 按照 时 间 轴 来 显示 的 。 
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21414 ”开发 者 工具 收集 网 页 使 用 内 存 情况 的 示意 图 


可 以 看 出 ， 在 某 个 时 间 点 之 后 内 存 的 使 用 量 突然 增 大 ， 这 是 因为 
在 前 面 一 小 段 时 间 内 ， 由 于 还 没有 开始 重新 加 载 网 页 ， 所 以 没有 出 现 


内 存 大 幅 增 长 的 情况 。 在 单 击 * 开 始 ” 按 钮 和 重新 加 载 网 页 ，WebKit 在 
等 待 网 络 响应 之 后 才 会 逐渐 增加 对 内 存 的 需求 。 当 网 络 下 载 数据 完成 
时 ，WebKit 使 用 内 存量 也 在 增加 。 而 webKit 完 成 泻 染 之 后 ， 解 释 过 程 
中 的 某 些 结构 不 再 需要 ， 这 些 不 需要 的 结构 被 销毁 后 内 存 就 会 降 到 一 
个 稳定 的 过 程 ， 图 中 上 半 部 分 的 曲线 就 是 反映 了 这 些 情 况 。 


除 此 之 外 的 JavaScript 引 擎 内 部 的 内 存 分 析 工 具 ， 也 可 以 按照 类 似 
的 情况 来 处 理 ， 这 里 不 再 做 过 多 的 介绍 。 


第 15 章 ”Web 前 端的 未 来 


本 章 这 个 话题 其 实 有 点 大 ， 因 为 未 来 Web 前 端 发 展 成 什么 样 ， 可 
能 超过 所 有 人 的 想象 ， 就 像 之 前 很 难 知道 现在 HTML5 技 术 获 得 如 此 巨 
大 的 推动 和 发 展 。 因 为 该 领域 的 内 容 实在 太 多 ， 笔 者 也 很 难 面 面 俱 
到 ， 因 此 ， 这 一 章 将 着 重 切入 其 中 非常 重要 的 几 点 ， 那 就 是 能 入 式 应 
用 模式 、Web 应 用 及 其 背后 的 Web 运 行 环境 等 方面 的 思考 ， 下 面 通过 
介绍 现在 的 技术 进展 和 分 析 一 些 趋势 ， 和 读者 一 起 一 先 未 来 可 能 发 生 
的 巨大 变化 。 


15.1 趋势 


说 到 Web 方 面 的 趋势 ， 特 别 是 HTML5 获 得 的 巨大 发 展 ，W3C 和 
WHATWG 等 组 织 正 在 不 停 地 推动 规范 的 演进 和 引入 新 的 规范 ， 这 一 
举动 必 将 极 大 地 推动 Web 前 端的 发 展 。 就 目前 Web 前 端 来 说 ， 各 种 类 
型 的 技术 非常 多 ， 极 容易 引起 大 家 的 误解 ， 有 鉴于 此 ， 结 合 笔者 自身 
的 理解 ， 总 结 出 一 些 比较 明显 的 趋势 同 大 家 分 享 ， 分 别 从 技术 上 和 方 
向 上 来 解读 。 首 先 从 技术 上 来 讲 ， 大 致 包括 以 下 一 些 可 能 。 


。 首先 ， 是 Web 能 力 的 逐渐 增强 。 越 来 越 多 的 本 地 功能 被 加 入 到 
JavaScript 中 去 ， 这 意味 Web 开 发 者 可 以 使 用 这 些 功 能 控制 Web 网 
页 的 行为 并 将 Web 前 端 扩展 到 更 为 广泛 的 应 用 场景 中 去 ， 例 如 多 
媒体 方面 ， 在 HTML5 之 前 ， 甚 至 需要 通过 插件 来 支持 它们 ， 但 是 
现在 不 仅仅 能 够 播放 多 媒体 资源 ， 开 发 者 甚至 可 以 使 用 JavaScript 
代码 来 开发 功能 更 强 、 沁 围 更 广 的 Web 资 源 到 多 媒体 网 页 中 。 


其 次 ，Web 中 将 引入 并 行 计算 的 能 力 。 现 在 的 JavaScript 只 能 串 行 
执行 ， 或 者 有 限 地 并 行 ， 如 使 用 Web Worker 技 术 ， 但 是 这 些 都 非 
常 的 原始 ， 每 一 个 Worker 都 只 能 访问 有 限 的 资源 ， 而 且 Worker 之 
间 通 信 的 效率 非常 低 (只 能 用 来 传递 消息 ) ， 离 真正 的 并 行 计 算 
还 差 得 非常 远 。 

再 次 ， 性 能 问题 。 对 于 性 能 方面 ， 也 是 开发 者 诉 病 最 多 的 地 方 之 
一 ， 因 为 泻 染 引擎 的 复杂 性 和 本 身 JavaScript 语 言 的 某 些 特性 ， 使 
得 Web 网 页 和 应 用 的 性 能 存在 较 大 的 缺陷 ， 好 消息 是 现在 性 能 

面 已 经 获得 长 足 的 进步 。 但 目前 Web 的 性 能 还 有 很 多 可 以 提高 的 
地 方 ， 一 些 应 用 场景 还 是 离 本 地 应 用 有 不 小 的 距离 ， 还 有 很 长 的 
路 需要 走 。 同 时 ， 考 虑 到 开发 者 对 于 调试 性 能 的 需求 ， 标 准 化 组 
织 也 在 制定 规范 来 帮助 收集 网 页 的 性 能 数据 ， 如 Navigation 
Timing、 Resource Timing、 User Timing 等 。 

最 后 ，Web 已 经 从 Web 网 页 向 Web 应 用 (Web Application) 方向 
发 展 。 这 一 推动 需要 加 入 大 量 现 有 操作 系统 提供 的 能 力 ， 所 以 各 
种 不 同 的 本 地 能 力 通 过 JavaScript 接 口 提 供给 Web 前端 开发 者 。 例 
如 各 个 传感器 的 功能 已 经 通过 JavaScript 接 口 提 供给 了 Web 应 用 。 
除 此 以 外 还 有 文件 或 者 存储 系统 、 用 户 交 互 、 网 络 连 接 、 应 用 的 
生命 周期 、 安 装 和 利 载 等 管理 ， 这 些 方 面 有 些 已 经 比较 成 熟 ， 但 
是 还 有 很 多 的 功能 在 制定 过 程 中 。 虽 然 标准 化 组 织 将 继续 加 入 新 
标准 ， 但 是 现在 还 有 很 多 缺失 的 地 方 需要 补 上 。 


下 面 主要 从 大 方向 上 来 讲 ， 主 要 包括 以 下 一 些 可 能 的 趋势 。 


首先 是 平台 化 策略 : 支撑 HTML5 技 术 的 框架 已 经 从 浏览 器 向 Web 
运行 平台 快速 演进 ， 这 是 一 个 非常 重大 的 转变 。 因 为 在 此 之 前 浏 
览 器 只 是 运行 网 页 而 已 ， 而 Web 运 行 平 台 可 以 管理 和 运行 Web 应 


用 ， 也 就 是 HTML5 技 术 能 够 开发 出 同 本 地 应 用 能 力 一 样 的 应 用 程 
序 ， 所 以 对 于 上 面 提 到 的 大 部 分 功能 都 需要 Web 平 台 支 持 ， 而 浏 
览 器 却 并 不 一 定 支持 这 些 功 能 。 虽 然 现在 很 多 Web 运 行 平台 是 从 
浏览 器 基础 上 开发 的 ， 但 是 这 并 不 意味 着 两 者 是 同一 回 事 。 

其 次 是 移动 化 : HTML5 目 前 在 移动 领域 得 到 了 长 足 的 发 展 ， 很 
多 新 技术 都 是 从 移动 领域 发 展 起 来 的 ， 如 各 种 传感器 功能 等 。 移 
动 领域 的 这 些 创新 已 经 并 将 继续 极 大 地 推动 HTML5 的 发 展 。 就 目 
前 而 言 ， 因 为 移动 领域 的 高 速 发 展 和 商店 模式 ， 使 得 现实 中 存在 
众多 不 同 的 操作 系统 、Web 应 用 ， 恰 好 能 够 提高 跨 操作 系统 的 能 
力 ， 很 多 开发 者 可 以 使 用 HTML5 技 术 来 开发 应 用 ， 并 方便 地 发 布 
到 不 同 的 应 用 商店 ， 可 以 说 移动 领域 是 HTML5 不 停 向 前 发 展 的 一 
个 重要 推动 力 。 

再 次 是 向 不 同 应 用 领域 渗透 : HTML5 技 术 目 前 能 够 满足 一 些 领 
域 的 需求 ， 这 些 领域 将 会 为 此 得 到 快速 发 展 。 对 于 目前 一 些 热门 
领域 如 游戏 而 言 ， 因 为 游戏 对 功能 和 性 能 有 非常 高 的 要 求 ， 所 以 
浏览 器 和 Web 平 台 对 于 游戏 的 支持 成 为 一 个 非常 重要 的 发 展 方 
向 。 同 时 ， 如 果 满 足 了 游戏 领域 的 要 求 ， 这 就 意味 着 可 以 促进 
HTML5 技 术 进 入 更 多 的 领域 。 

最 后 ，Web 和 HTML5 技 术 : 向 不 同 的 能 入 式 领 域 发 展 ， 因 为 它 
的 跨 平 台 性 和 低 成 本 性 ， 很 适合 将 它 应 用 在 电视 、 车 载 系统 、 家 
用 电器 等 领域 。 在 这 些 能 入 式 应 用 场景 中 ， 系 统 只 需要 支持 Web 
技术 ， 就 能 够 轻易 运行 众多 Web 应 用 ， 这 有 利于 降低 企业 成 本 。 


以 上 这 些 技术 和 方向 ， 每 个 都 可 以 花费 很 多 篇 幅 去 介绍 和 描述 它 
们 ， 本 章 主要 是 想 着 重 从 Web 应 用 和 Web 运 行 平台 两 个 最 重要 的 地 方 
着 手 ， 着 重 介绍 目前 的 一 些 进 展 ， 未 来 的 发 展 路 程 将 会 很 长 ， 笔 者 希 
望 和 读者 一 起 关注 它们 。 当 然 ， 如 果 读 者 完全 相信 了 笔者 这 些 关 于 趋 


势 的 描述 并 且 认 为 Web 前 端 就 是 这 些 变化 ， 那 还 是 赶紧 从 其 中 摆脱 出 
来 吧 ， 因 为 它们 会 阻碍 读者 的 思维 。 笔 者 建议 大 家 理 一 理 自己 的 思 
路 ， 可 能 会 发 现 更 多 有 价值 的 方向 值得 投入 ， 千 万 不 要 被 这 里 的 趋势 
所 固化 。 


15.2 FRAT IAS 
15.2.1 WAJRA 


读者 可 能 会 奇怪 本 章 重 点 表达 的 是 web 应 用 和 Web 运 行 平 台 ， 为 
什么 会 介绍 矢 入 式 模式 (Embedded Mode) We? 这 是 因为 很 多 Web 运 
行 平台 是 基于 宇 入 式 模 式 的 接口 开发 出 来 的 ， 所 以 这 里 先 解释 一 下 什 
么 叫做 是 酝 入 式 模 式 ， 并 了 解 一 些 典 型 的 案例 。 


因为 通常 来 讲 浏 览 器 是 一 个 本 地 应 用 程序 ， 当 用 户 打开 一 个 网 页 
时 ， 它 提供 可 视 化 界面 。 但 是 ， 很 多 其 他 本 地 应 用 程序 (如 邮件 客户 
端 使 用 该 接口 来 打开 上 邮件， 因为 有 些 邮 件 是 使 用 HTML 格 式 来 编写 
的 ) 希望 使 用 网 页 泻 染 和 HTML5 的 功能 ， 同 时 又 不 需要 浏览 器 的 某 些 

上 《如 标签 管理 等 ) ， 这 时 它们 希望 泻 染 引擎 能 够 提供 一 组 接口 ， 
本 地 应 用 程序 能 够 使 用 这 些 接口 来 泻 染 网 页 ， 同 时 又 能 使 用 本 地 代码 
编写 其 他 一 些 能 力 ， 这 就 是 能 入 式 应 用 模式 。 所 谓 的 对 入 式 模 式 是 
指 ， 在 泻 染 引擎 之 上 提供 一 层 本 地 〈 如 C++ 或 者 Java) 接口 ， 这 些 接 
口 提供 了 演 染 网 页 的 能 力 ， 泻 染 的 结果 被 绘制 到 一 个 控件 或 者 子 窗口 
中 ， 本 地 应 用 通过 本 地 接口 来 获得 泻 染 网 页 的 能 力 。 


目前 能 入 式 应 用 模式 被 广泛 地 使 用 ， 很 多 本 地 应 用 都 需要 有 能 
泻 染 网 页 ， 下 面 介 绍 两 个 非常 典型 的 基于 Webkit 泻 染 引 擎 的 藤 入 式 接 
口 或 者 说 是 框架。 


15.2.2 CEF 


CEF 全 称 Chromium Embedded Framework， 它 是 一 个 开源 项 目 ， 
目的 是 提供 一 套 罕 入 式 的 本 地 代码 (C/C++) 编程 接口 ， 最 初 的 版 
本 是 基于 早期 的 Chromium 开 源 项 目 中 的 RendererHost 类 和 很 多 其 他 内 
部 接口 开发 而 来 的 ， 这 些 内 部 接口 变化 很 大 ， 而 且 是 单 进程 架构 。 在 
新 的 CEF3 中 ， 它 主要 依赖 于 相对 稳定 的 Content API 来 实现 的 。 


CEF 之 所 以 选择 Chromium 项 目 作为 基础 ， 是 因为 Chromium 对 
HTML5 能 力 提 供 了 非常 好 的 支持 ， 并 且 Chromium 支 持 Windows、 
MacOS 和 Linux 等 操作 系统 ， 所 以 CEF 项 目 被 众多 用 户 所 使 用 。 


为 了 清晰 地 了 解 WebKit、Chromium 和 CEF 之 间 的 关系 ， 图 15-1 描 
述 了 WebKit、content API、 浏 览 器 、 Content Shell 和 CEF3 的 层次 关 
系 。 Chrome 浏 览 器 、Content Shell 和 CEF3 三 者 都 是 基于 Content API 开 
发 的 ， 它 们 只 是 有 些 不 同 的 实现 ， 服 务 于 不 同 的 应 用 场景 而 已 。 


Content shell 
Content API 
AN j x = 1 4 


WebKit 移植 


15-1 CEF 在 Chromium 层 次 结构 中 的 位 置 


早 在 Content API 出 现 之 前 ，CEF 便 已 出 现 ， 它 能 够 提供 财 入 式 的 
框架 ， 可 以 让 泻 染 网 页 的 功能 方便 地 同 入 到 应 用 程序 中 。CEF 依 赖 于 
Chromium 开 源 项 目 ， 所 以 Chromium 对 HTML5 的 支持 和 性 能 上 的 优 
势 ， 都 得 以 继续 在 CEF 中 体现 出 来 。 但 是 ， 根 据 实际 测试 的 结果 来 
看 ， 对 于 最 初 的 版 本 ， 情 况 可 能 并 非 如 此 。 首 先 ， 它 对 GPU 硬件 加 速 
的 支持 不 是 很 好 ， 这 是 因为 它 会 把 GPU 内 存 读 回 到 CPU 内 存 ， 速 度 非 
常 慢 。 再 次 ， 因 为 基于 Chromium 的 接口 经 常 变化 ， 所 以 CEF 经 常 需要 
发 生变 化 ， 这 对 维护 人 员 来 说 是 件 很 头痛 的 事 。 


得 益 于 Content API 的 出 现 ，CEF 的 作者 也 基于 该 接口 开发 了 
CEF3。 CEF3 在 保持 其 提供 的 接口 基本 不 变 的 情况 下 ， 借 助 Content 
API 的 能 力 ， 对 HTML5 和 GPU 硬件 加 速 提供 了 较 好 的 支持 。 它 的 核心 
变 为 调用 Content API 的 接口 和 实现 Content API 的 回调 接口 ， 来 组 织 和 
包 凌 成 CEF3 目 己 的 接口 以 被 其 他 开 友 者 所 使 用 。 其 好 处 是 ，CEF3 的 
接口 相对 比较 简单 ， 使 用 起 来 方便 ， 同 时 不 需要 实现 很 多 Content API 


的 回调 接口 ， 缺 点 就 是 ， 如 果 需 要 使 用 Content API 的 很 多 功能 ，CEF3 
的 接口 可 能 做 不 到 ， 或 者 说 只 能 通过 直接 调用 Content API 接 口 来 完 


成 


o 


下 面 简单 介绍 一 下 CEF3 的 接口 类 。 


CefClient : 它 是 一 个 回调 管理 类 ， 包 含 5 个 接口 类 ， 用 于 创建 其 
他 的 回调 类 的 对 象 。CefLifeSpanHandler 回 调 类 ， 用 于 控制 弹出 对 
话 框 的 创建 和 关闭 等 操作 。CefLoadHandler 回 调 类 ， 可 以 用 来 监 
听 frame 的 加 载 开始 、 完 成 、 错 误 等 信息 。CefRequestHandler 回 调 
类 ， 用 于 监听 资源 加 载 、 重 定向 等 信息 。CefDisplayHandler 回 调 
类 ， 用 于 监听 页 面 加 载 状态 、 地 址 变化 、 标 题 等 信息 。 
CefGeolocationHandler 回 调 类 ， 用 于 CEF3 向 做 入 者 申请 地 理 位 置 
等 权限 。 

CefApp : 与 进程 、 命 令 行 参 数 、 代 理 、 资 源 管理 相关 的 回调 
类 ， 用 于 让 CEF3 的 调用 者 们 定制 自己 的 逻辑 。 

CefBrowser : 它 是 Renderer 进 程 中 执行 浏览 相关 的 类 ， 如 网 页 的 
前 进 、 后 退 等 。 

CefBrowserHost : Browser 进 程 中 的 执行 浏览 相关 的 类 ， 它 会 把 
请 求 发 送 给 CefBrowser 类 。 

CefFrame : 该 类 表示 的 是 页 面 中 的 一 个 网 页 框 (Frame) ， 可 以 
加 载 特定 URL， 在 该 运行 环境 下 执行 JavaScript 代 码 等 。 

V8 : CEF3 提 供 支 持 V8 扩展 的 接口 ， 但 是 这 里 有 两 个 限制 。 第 
一 ，V8 扩展 仅 在 Renderer 进 程 使 用 ; 第 二 ， 仅 在 阔 箱 模 型 天 闭 时 
才 使 用 。 


(S 


CEF 项 目 虽 然 不 是 特别 复杂 ， 但 是 因为 带 来 了 好 处 ， 使 得 它 受 至 


了 开发 者 的 欢迎 ， 特 别 是 在 桌面 系统 中 使 用 它 来 泻 染 HTML5 网 页 。 


15.2.3 Android WebView 


熟悉 Android 系 统 和 HTML 编程 的 开发 者 可 能 听 说 过 Android 提 供 的 
一 个 重要 类 android.webkit.WebView， 它 继承 于 View 类 (一 个 视图 控件 
X) ， 这 是 它 同 其 他 很 多 控件 的 相似 之 处 。 不 同 之 处 在 于 ， 它 能 够 用 
来 泻 染 网 页 。WebView 是 一 个 典型 的 能 入 式 模 式 的 接口 。 当 前 (也 就 
是 Android 4.3 以 前 的 版 本 ) ，WebView 本 身 只 是 一 个 编程 接口 ， 它 的 
内 部 实现 是 基于 现 有 的 默认 WebKit 内 核 (Android 默 认 浏 览 器 是 基于 
WebView 构 建 ) ， 虽 然 它们 都 叫 wWebKit， 但 不 同 于 Chromium 所 使 用 的 
WebKit 内 核 。 


目前 ，WebView 被 广泛 应 用 在 众多 的 Android 本 地 应 用 程序 中 ， 通 
常 笔者 称 之 为 混合 应 用 程序 。 遗 憾 的 是 ， 它 对 HTML5 的 支持 不 是 特别 
好 ， 而 且 也 没有 新 的 功能 被 加 入 进来 ， 同 时 ，Chromium 的 Android 版 
正在 积极 向 前 发 展 ， 更 多 针对 该 平台 的 HTML5 能 力 和 优化 已 经 逐步 被 
实现 和 采用 ， 那 么 是 否 也 可 以 使 用 Chrome 的 内 核 来 实现 该 WebView 
呢 ? 答案 当然 是 肯定 的 。 


目前 ， 该 项 目 已 经 启动 并 取得 了 民 好 进展 ， 核 心思 想 在 于 保持 
WebView 的 接口 兼容 性 ， 同 时 将 内 部 的 实现 从 当前 默认 WebKit 内 核 变 
成 了 Chromium 的 内 核 ， 但 是 原 有 的 WebViewAPI 保 持 不 变 ， 这 样 对 于 
WebView 的 用 户 来 说 ， 调 试 代码 时 不 需要 做 任何 改变 ， 便 可 以 使 用 功 
能 更 多 性 能 更 好 的 泻 染 内 核 了 。 在 Android KitKat 4.4 版 本 后 ，Google 
公司 已 经 使 用 Chromium 项目 来 实现 WebView 接 口 ， 不 过 它 仍然 同 
Chrome 的 Android 版 浏览 器 存在 比较 大 的 区 别 ， 如 进程 模型 
《Chromium 的 WebView 使 用 单 进程 ) 、 不 同 绘图 模型 、 功 能 支持 


(Chromium BY Web View {E Android 4.4 中 不 支持 WebGL、 WebRTC 和 
WebAudio 等 ) 等 方面 存在 比较 大 的 差异 ， 而 且 性 能 也 不 是 很 好 。 


开发 者 可 以 通过 编译 目标 “android_webview_apk” 来 尝试 一 下 它 的 
功能 ， 这 也 是 基于 WebView 的 一 个 简单 的 应 用 程序 实例 ， 就 如 同 
Content 模 块 和 Content Shell 的 和 关系。 不 过 这 不 是 真正 的 WebView 的 实 
现 ， 因 为 Chromium 的 WebView 仍 然 要 求 同 Android 的 系统 代码 一 起 编 
译 ， 这 里 只 是 一 个 简单 的 测试 APK。 


初 看 一 下 ， 目 前 的 代码 结构 如 下 图 所 示 ， 在 Content API 之 上 ， 
Chromium 的 WebView 实 现 了 封装 一 个 新 类 AwContents， 该 类 主要 基于 
ContentViewCore 类 的 实现 。 


AwContents 提 供 的 不 是 WebView 的 接口 ， 所 以 ， 需 要 一 层 桥 接 部 
分 ， 将 AwContents 桥 接 到 WebView， 这 就 是 图 15-2 中 的 桥接 模块 ， 该 
模块 位 于 Android 源 代码 中 ， 目 前 已 经 开源 (Android 4.4 代 码 树 ) ， 开 
发 者 可 以 尝试 自行 编译 。 


android.webkit.WebView 


桥接 层 : AwContents 到 WebView 


Android AOSP 


; ; AwContents 
Chromium Project 


Content Browser Components 


Blink 


15-2 ”基于 Chromium 的 WebView 层 次 结构 


AwContents 同 样 也 是 基于 Content API 开 发 的 ， 在 这 点 上 ， 它 同 


Content Shel 和 Chromium 浏 览 器 没有 大 的 不 同 ， 区 别 在 于 它们 对 很 多 
Content API 接 口中 的 回调 类 实现 不 同 ， 这 是 Content API 用 于 让 使 用 者 
参与 内 部 逻辑 和 实现 的 过 程 。 具 体 来 说 ， 它 主要 有 以 下 三 个 方面 的 不 


同 。 


第 一 是 泻 染 机 制 : 因为 WebView 提 供 的 是 一 个 View 控 件 ， 那 么 
View 控 件 所 在 的 容器 可 能 需要 该 View 控 件 将 泻 染 结果 保存 在 内 存 
中 (如 位 图 ) ， 或 者 是 保存 在 显存 中 (如 Surface 对 象 ) ， 所 以 ， 
WebView 需 要 提供 两 种 不 同 的 泻 染 输出 结果 。 那 么 是 否 意 味 着 
WebView 提 供 软件 泻 染 和 GPU 硬件 泻 染 两 种 方式 呢 ? 答案 是 否定 
的 。 目 前 ，Chromium 的 Android 版 不 提供 网 页 软件 泻 染 ， 只 
GPU 硬件 泻 染 一 种 方式 ， 其 泻 染 的 结果 由 合成 器 生成 。 那 么 ， 如 
何 生 成 位 图 呢 ? 最 初 是 通过 OpenGL 图 形 库 提供 的 回 读 
(Readback ) 方式 生成 。 当 合成 器 每 合成 一 帧 的 时 候 ， 
AwContents 类 将 该 帧 保存 在 一 个 存放 在 CPU 内 存 中 的 链表 中 ， 当 
用 户 界面 需要 重新 绘制 的 时 候 ， 便 把 当前 的 图 片 取 出 ， 绘 制 在 当 
前 控件 的 Canvas 对 象 中 。 不 过 ， 这 样 做 会 导致 其 性 能 低 效 ， 所 以 
这 只 是 一 个 临时 方案 。 在 最 新 的 代码 中 ，Chromium 即 将 引入 一 种 
新 机 制 ， 能 够 支持 输出 到 CPU 内 存 中 。 
第 二 是 进程 模型 : 目前 webView 只 支持 单 进程 方式 ， 未 来 应 该 也 
不 会 支持 多 进程 方式 。 单 进程 意味 着 没有 办 法 使 用 Android 的 
isolated UID 机 制 ， 因 此 ， 某 种 程度 上 来 讲 ， 其 安全 性 降低 了 ， 而 
且 页 面 的 泻 染 骨 冲 会 导致 使 用 webView 的 应 用 程序 朋 溃 。 
第 三 对 系统 库 和 内 部 接口 的 依赖 : 目前 Chromium WebView 使 用 
了 Android 系 统 的 一 些 内 部 库 ， 典 型 的 如 Skia 图 形 库 (通常 系统 中 
的 Skia 图 形 库 版 本 较 旧 ， 人 性 能 没有 最 新 的 好 ) ， 这 使 得 性 能 方面 


存在 某 些 问题 。 同 时 ，Chromium WebView 还 依赖 一 些 系统 内 部 的 
接口 ， 这 些 接口 使 得 它 不 能 用 Android SDK 和 NDK 来 编译 。 


15.3 “Web 应 用 和 Web 运 行 环境 


15.3.1 Web 应 用 


HTML5 提 供 了 强大 的 能 力 ， 而 不 是 支持 Web 网 页 这 么 简单 。 就 目 
前 而 言 ， 它 已 经 初步 提供 了 支持 Web 网 页 向 Web 应 用 方向 发 展 的 能 
力 。 相 对 于 本 地 应 用 (Native Application) ，Web 前 端 领域 也 能 够 提供 
编写 应 用 程序 的 能 力 了 。 前 面 提 到 了 移动 领域 是 HTML5 重 点 关注 的 一 
个 方向 ， 在 W3C 中 ， 甚 至 成 立 了 一 个 工作 组 专门 跟踪 和 关注 移动 领域 
Web 应 用 所 需要 各 项 技术 的 进展 情况 
http://www.w3.org/2013/06/mobile-web-app-state/o 


很 多 技术 对 于 Web 网 页 和 Web 应 用 是 共享 的 ， 如 基础 泻 染 工作 、 
Canvas2D、WebGL、CSS、 音 视频 等 ， 但 是 还 有 众多 的 技术 是 为 Web 
应 用 设计 的 ， 如 Web manifest 规 范 、 运 行 模型 规范 等 。 


根据 W3C 规 范 的 定义 ， 可 以 将 Web 应 用 分 成 两 种 类 型 ， 第 一 种 称 
为 Packaged Application ， 也 就 是 该 应 用 包含 了 自身 所 需要 的 所 有 资 
源 ， 包 括 HIML、CSS、JSS 及 各 种 图 片 等 资源 ， 这 意味 着 该 应 用 不 需 
要 网 络 就 能 运行 。 第 二 种 称 为 Hosted Application ， 不 是 Packaged 
Application 类 型 的 应 用 都 属于 此 类 ， 所 以 也 就 是 说 它 包 含 了 一 些 外 部 
的 资源 。 为 什么 会 如 此 划分 ? 主要 是 针对 需求 和 安全 方面 的 考虑 ， 后 


面 会 介绍 到 。 


在 一 些 应 用 场景 下 需要 Packaged Application 类 型 ， 第 一 是 因为 应 
用 市 场 的 需要 ， 很 多 市 场 需要 审核 应 用 使 用 哪些 权限 ， 而 不 是 无 限制 
地 使 用 任何 平台 提供 的 能 力 ， 这 点 对 于 安全 性 尤为 重要 。 第 二 是 因为 
开发 者 的 需要 ， 使 用 Web 前 端 和 HTML5 技 术 开发 并 不 意味 着 需要 提供 
服务 器 并 把 Web 应 用 布置 在 服务 器 上 。 像 本 地 应 用 一 样 ，Web 应 用 也 
能 够 独立 地 工作 。 第 三 是 因为 用 户 的 需要 ， 很 多 时 候 用 户 希 望 在 离线 
情况 下 仍然 能 够 使 用 该 应 用 ， 不 要 像 很 多 本 地 应 用 一 样 ， 一 旦 离线 就 
不 能 使 用 ， 这 点 对 于 用 户 体验 是 个 考验 ， 对 于 中 国 等 市 场 尤 其 重要 。 


与 普通 网 页 不 同 的 是 ， 一 个 Web 应 用 通常 包含 一 个 称 为 清单 
(Manifest) 的 文件 ， 该 文件 的 目的 跟 很 多 系统 如 Android 上 的 应 用 程 
序 的 清单 文件 类 似 ， 就 是 为 了 定义 该 应 用 的 一 些 信息 。 示 例 代 码 15-1 
是 一 个 Web 应 用 的 简单 清单 文件 ， 参 考 了 W3C 官 网 的 一 些 说 明 ， 并 做 
了 一 些 修改 。 


一 个 清单 文件 实际 上 是 一 个 JSON (JavaScript Object Notation) 格 
式 的 文件 ， 它 主要 是 属性 和 属性 值 的 配对 ， 该 类 文件 是 由 W3C 的 规范 
来 定义 的 ， 示 例 代 码 15-1 中 列 出 了 一 些 基 本 的 属性 和 属性 值 ， 下 面 逐 
次 来 分 析 和 理解 它们 。 


示例 代码 15-1 一 个 简单 的 清单 文件 


"name": "webKit 技 术 内 幕 "， 
"description": "介绍 webKit 内 部 技术 和 原理 " ， 
"launch_path": "/index.html", 


"version": "0.1", 


"icons": { 
"16": "/img/icon.png", 

ty 

"screen_size": { 
"min_width": "600", 
"min_height": "600" 

ty 

"fullscreen": "true", 

"required_features": ["touch", "geolocation", "webgl"], 

"permissions": { 
"contacts": { 


"access": "read" 


ty 
I 


首先 是 应 用 基本 信息 的 设置 ， 包 括 名 称 “name”、 描 述 
“description”、 加 载 入 口 文 件 “launch_path”、 版 本 “version”、 标 
“icons”(〈 规 范 甚 至 允许 设置 多 个 不 同 分 辨 率 的 图 片 ) 、 窗 口 大 小 
“screen_size”、 全 屏 *fullscreen”。 之 后 是 该 应 用 需要 使 用 的 功能 和 权 
限 ， 它 们 的 区 别 在 于 权限 是 系统 中 的 一 些 非常 敏感 的 信息 ， 如 个 人 信 
息 ， 包 括 但 是 不 限于 通讯 录 、 位 置 、 文 件 系统 等 。 


当然 规范 中 定义 的 属性 远 远 不 止 这 些 ， 清 单 的 规范 也 在 不 断 发 
展 ， 以 后 可 能 会 做 一 些 修改 ， 并 在 未 来 引入 更 多 的 设置 信息 。 这 样 ， 
Web 应 用 看 起 来 就 越 来 越 像 本 地 应 用 了 。 


15.3.2 ” Web 运行 环境 


Web 应 用 需要 有 支撑 的 运行 环境 才能 够 工作 ， 就 像 本 地 应 用 需 
操作 系统 才能 工作 ， 所 以 能 够 支撑 Web 应 用 运行 的 平台 或 者 运行 环 
境 ， 称 为 Web 运 行 环境 (也 可 以 叫 Web 平 台 ) 。 那 么 一 个 Web 运 行 环 境 
包含 哪些 功能 或 者 特性 呢 ? 


图 15-3 描 述 了 Web 运 行 平台 的 功能 及 其 与 Web 应 用 的 关系 ， 下 面 逐 
次 来 分 析 它 们 。 


存储 功能 


JavaScript 功能 


图 15-3 ”Web 运 行 平台 功能 和 Web 应 用 


。 首先 是 运行 HTML5 功 能 的 能 力 : Web 运 行 平台 当然 能 够 支持 众 
多 HTML5 功 能 ， 包 括 基本 功能 如 CSS、JavaScript、Canvas2D 等 ， 
同时 也 必须 包括 访问 设备 的 能 力 ， 典 型 能 力 如 设备 信息 、 地 理 位 
置信 息 、 加 速 传 感 器 、 摄 像 头等 。 

。 其 次 是 对 (离线 ) 存储 的 要 求 : 因为 Web 应 用 需要 能 够 访问 文件 
系统 或 者 使 用 大 量 的 存储 空间 ， 特 别 是 离线 应 用 ， 这 里 面包 括 离 


线 缓存 、 文 件 系统 、 文 件 操作 接口 等 方面 的 规范 支持 ， 这 些 对 于 
应 用 特别 重要 。 

再 次 是 将 Web 资源 文件 打包 的 支持 : 也 就 是 将 
HTML/CSS/JavaScript 文 件 和 其 他 资源 文件 生成 一 定格 式 的 包 ， 这 
里 面 重要 的 一 点 就 是 对 清单 的 支持 。 清 单 描述 了 Web 应 用 的 基本 
设置 ， 这 些 设置 对 于 网 页 而 言 是 不 需要 的 ， 但 是 Web 应 用 需要 这 
些 来 定义 它 作为 一 个 应 用 程序 的 行为 ， 如 前 面 说 的 全 屏 、 窗 口 大 
小 、 图 标 等 。 

然后 是 应 用 程序 的 运行 模式 : 也 就 是 生命 周期 方面 的 支持 。Web 
运行 环境 能 够 通知 Web 应 用 启动 、 挂 起 、 恢 复 和 销毁 等 状态 信 
息 。 这 个 是 区 别 于 网 页 的 重要 特征 之 一 。 

最 后 是 能 够 启动 并 运行 Web 应 用 : 是 的 ， 这 可 以 让 Web 应 用 使 用 
起 来 跟 本 地 应 用 的 体验 相同 或 者 类 似 ， 而 不 仅仅 是 网 页 浏览 的 方 
式 ， 这 里 面包 括 开 启 应 用 、 关 闭 应 用 、 升 级 应 用 和 管理 应 用 等 。 


虽然 都 能 支持 Web 应 用 ， 但 是 Web 运 行 环境 也 是 多 种 多 样 的 。 按 


照 Web 运 行 环境 的 工作 模式 ， 目 前 可 以 将 它 分 成 三 种 类 型 。 


操作 系统 本 身 就 支持 Web 应 用 ， 所 以 通常 称 为 Web 操 作 系 统 ， 典 
型 的 例子 如 Tizen、Chrome OS, Firefox OS 等 。 因 为 整个 操作 系统 
就 是 为 了 Web 应 用 设计 的 ， 所 以 Web 应 用 在 系统 中 是 第 一 等 公 
民 。 

浏览 器 或 者 其 他 类 似 的 产品 中 包含 支持 Web 应 用 的 能 力 ， 典 型 的 
例子 是 Crosswalk 的 Tizen 版 (英特尔 公司 的 开源 项 目 ) 、 
Chromium 的 桌面 版 和 Pokki 等 。 这 一 类 型 的 特性 是 web 应 用 都 是 由 
该 运行 环境 管理 ， 操 作 系统 看 不 到 Web 应 用 的 存在 ， 而 且 每 个 
Web 应 用 也 不 会 都 变 成 一 个 本 地 应 用 。 因 为 本 身 操作 系统 只 是 支 


持 本 地 应 用 ， 所 以 Web 应 用 对 操作 系统 而 言 是 透明 的 ， 它 看 到 的 
是 多 个 运行 环境 中 的 实例 。 

以 一 个 独立 的 框架 存在 于 传统 的 操作 系统 ， 本 来 Web 运 行 环境 依 
赖 于 操作 系统 才能 运行 ， 而 web 应 用 工作 在 该 Web 运行 环境 中 ， 
就 像 本 地 应 用 一 样 ， 所 以 操作 系统 不 能 感知 它 是 本 地 应 用 还 是 
Web 应 用 ， 典 型 的 例子 如 Crosswalk (Androidhk) 和 Cordova (也 
就 是 PhoneGap 使 用 的 开源 项 目 ) 。 它 同 第 二 类 型 的 区 别 在 于 ， 
Web 应 用 本 身 会 被 打包 成 本 地 应 用 ， 所 以 操作 系统 认为 每 个 打包 
后 的 Web 应 用 就 是 一 个 本 地 应 用 ， 每 个 Web 应 用 之 后 的 启动 方式 
跟 本 地 应 用 相同 ， 当 然 ，Web 应 用 是 由 Web 运 行 环 境 这 个 本 地 应 
用 启动 并 运行 的 。 


15.4 Cordova 项 目 


Cordova 是 一 个 开源 项 目 ， 能 够 提供 将 Web 网 页 打包 成 本 地 应 用 格 
式 的 可 运行 文件 。 读 者 可 能 对 Cordova 项 目 陌 生 ， 但 是 大 家 可 能 对 它 的 
前 身 非 常熟 悉 ， 那 就 是 PhoneGap 项 目 ， 它 后 来 被 Adobe 公 司 收购 。 


图 15-4 描 述 了 Cordova 的 主要 工作 思想 ， 对 于 一 个 Web 应 用 ， 结 合 
Cordova 提 供 的 本 地 代码 和 框架 ， 使 用 Cordova 的 打包 工具 将 它们 一 起 
打包 成 一 个 个 同系 统 相关 的 本 地 可 执行 文件 ， 这 里 的 打包 工具 不 同 于 
前 面 说 的 Web 的 清单 文件 ， 而 是 指 将 Web 应 用 打包 成 操作 系统 支持 的 
本 地 可 执行 文件 。 虽 然 这 些 本 地 文件 不 能 跨 操 作 系统 ， 但 是 对 于 Web 
开发 者 来 说 ， 它 确实 只 需要 编写 HTML5 相 关 的 代码 即 可 ， 而 不 需要 关 
注 跟 平台 相关 的 编程 语言 和 接口 ， 所 以 不 需要 有 很 强 的 平台 背景 。 


Web 应 用 


Cordova 本 地 框 Cordova 的 打包 


架 和 代码 LAL 
Android 可 执行 iOS 可 执行 文件 Windows Phone 
文件 可 执行 文件 
Vv / V 


Android 系统 网 iOS 系统 网 页 泻 Windows Phone 
页 泻 染 模块 系统 演 染 模块 


BlackBerry 可 执 
行文 件 
Vv 


BlackBerry 系统 
网 页 泻 染 模 块 


染 模块 


15-4 ”Cordova 的 工作 流程 


从 图 15-4 中 可 以 看 出 ，Cordova 项 目 一 个 重要 的 特性 就 是 使 用 系统 
提供 的 网 页 泻 染 能 力 ， 而 自身 的 框架 和 代码 中 不 包含 这 一 能 力 ， 因 而 
它 本 身 没 有 提供 额外 的 HTML5 能 力 。 不 过 ， 非 常 好 的 一 点 是 ， 
Cordova 项 目 提 供 了 一 系列 的 接口 ， 如 Device 、 NetworkInfo 等 
JavaScript 接 口 ， 很 多 接口 后 来 被 W3C 采 用 成 为 标准 ， 这 的 确 非常 好 地 
推动 了 Web 的 发 展 。 


Cordova 的 这 一 设计 极 大 地 方便 了 Web 开 发 者 ， 使 得 它 在 很 短 的 时 
间 内 获得 了 巨大 的 成 功 ， 现 在 使 用 PhoneGap 打 包 的 Web 应 用 成 千 上 
万 ， 下 面 看 一 看 它 的 优势 和 不 足 之 处 。 


首先 是 优势 。 第 一 是 提供 跨 平台 的 支持 ， 它 训 括 了 所 有 主流 的 移 
动 操作 系统 ， 这 使 得 Web 的 跨 平台 优势 落 到 了 实处 ; 第 二 是 提供 了 自 
动 化 的 打包 工具 ; 第 三 是 提供 了 插件 机 制 ， 使 得 开发 者 扩展 Web 的 能 

变 得 轻而易举 ; 第 四 是 提供 了 一 套 Web 接 口 ， 这 些 接口 提供 了 访问 
设备 的 能 力 ， 让 更 多 的 需求 得 到 了 满足 。 


但 是 ， 它 也 存在 一 些 不 足 之 处 。 首 先 当 然 还 是 它 的 HTML5 能 力 和 
性 能 ， 严 重 依赖 于 操作 系统 网 页 泻 染 模块 的 能 力 ， 典 型 的 问题 是 很 多 
开发 者 对 于 Android 上 Web 运 行 环境 功能 和 性 能 的 抱怨 ， 笔 者 曾 听 到 这 
类 问题 被 多 次 提 及 ， 如 HTML5 能 力 支 持 不 足 、 性 能 不 能 满足 需求 等 。 
另外 ， 由 于 不 同 操作 系统 使 用 的 网 页 泻 染 模块 不 一 致 ， 直 接 导 致 Web 
应 用 在 不 同 平台 不 能 使 用 相同 的 HTML5 能 力 和 Web 接 口 ， 典 型 的 例子 
是 Android 上 不 能 够 使 用 WebGL 等 功能 ， 这 对 于 开发 者 来 说 绝对 不 是 什 
么 好 事 。 


15.5 ”Crosswalk 项 目 


Crosswalk 项 目 是 由 大 特 尔 公司 发 起 的 一 个 开源 项 目 ， 该 项 目 基于 
WebKit (Blink) 和 Chromium 等 开源 项 目 打 造 ， 其 目的 是 提供 一 个 跨 
不 同 操作 系统 的 web 运行 环境 ， 包 括 Android、Tizen 、Linux、 
Windows、MacOS 等 众多 平台 ， 目 前 主要 支持 Android、Tizen 和 Linux 
等 。 如 前 面 描 述 ，Crosswalk 是 该 Web 运 行 环境 中 能 够 作为 操作 系统 的 
一 个 独立 模块 或 者 说 是 本 地 应 用 ， 而 Crosswalk 本 身 不 是 一 个 操作 系 
统 ， 具 体 请 读者 查看 “https://www.crosswalk-project.org/”。 不 同 于 
Cordova 项 目 ，Crosswalk 不 仅仅 提供 一 些 Web 接 口 的 扩展 ， 也 不 是 简单 
的 基于 系统 默认 的 骨 入 式 应 用 接口 ， 如 Android WebView， 而 是 使 用 新 
Blink 和 Chromium 的 能 力 ， 加 强 对 HTML5 能 力 的 支持 ， 同 时 加 入 了 
Web 作 为 一 个 运行 平台 的 各 种 能 力 ， 从 功能 上 看 ， 它 对 Web 应 用 的 支 
持 和 规范 的 支持 更 加 完整 ， 图 15-5 描 述 了 Web 应 用 在 Crosswalk 上 的 基 
本 工作 过 程 。 


15-5 中 可 以 看 到 在 Android 系 统 和 Tizen 系 统 上 两 者 是 有 些 不 一 样 
的 ， 这 是 因为 Tizen 系 统 本 身 是 一 个 直接 支持 Web 应 用 的 操作 系统 ， 所 
以 它 支 持 将 Web 应 用 (XPK 格 式 ) 安装 到 系统 中 而 不 需要 额外 的 处 
理 。 当 用 户 需 要 启动 Web 应 用 的 时 候 ， 由 Crosswalk 加 载 Web 应 用 的 设 
置 并 使 用 运行 环境 来 启动 该 Web 应 用 。 


Web 应 用 
(HTML/JS/CSS 


Crosswalk 提 供 的 Crosswalk 提供 的 


Android 工具 Tizen 工具 


Android APK Tizen XPK 
(包含 Web 应 用 ) (包含 Web 应 用 ) 


Crosswalk Tizen 


Crosswalk Android 


应 用 局 动 并 运行 


15-5 ”Crosswalk 支 持 Web 应 用 的 示意 


在 Android 系 统 上 ， 那 就 是 不 同 的 故事 了 ，[ 因 为 Android 系 统 只 是 
支持 本 地 应 用 ， 为 此 需要 特殊 的 工具 将 Web 应 用 转换 成 Android 系 统 的 
APK。 这 一 工具 当然 需要 满足 Android 上 的 特别 需求 ， 这 里 有 两 个 目 


的 。 


。 因为 Web 应 用 中 有 名 称 、 图 标 、 加 载 入 口 等 信息 ， 这 些 信 息 需 
设置 到 Android 的 AndroidManifest.xml 中 ， 因 此 ， 当 用 户 安装 该 


APK 的 时 候 ， 名 称 和 图 标 等 信息 就 会 显示 在 应 用 的 列表 中 ， 跟 其 
他 本 地 应 用 看 起 来 一 样 。 

满足 Android 系 统 只 能 从 Application 和 Activity 类 来 启动 ， 而 不 是 
Web 应 用 。 为 此 ，Crosswalk 项 目 提供 了 一 些 代 码 来 让 Android 系 统 
启动 Crosswalk 运 行 平 台 ， 而 该 运行 平台 根据 Web 应 用 的 设置 来 启 
动 Web 应 用 。 


下 面 以 Android 平 台 上 的 实现 为 例 说 明 Crosswalk 项 目的 架构 和 特 
性 。 目 前 ， 项 目 还 在 不 断 地 发 展 中 ， 首 先 理 解 一 下 Crosswalk 在 
Android 平 台 上 的 设计 结构 ， 图 15-6 是 Crosswalk 在 Android 系 统 上 的 层 
次 结构 图 。 


WebApp 


WebApp APK Wrapper 


Runtime 


Runtime Core 


Content 


Blink 


15-6 ”Crosswalk 在 Android 系 统 上 的 层次 结构 


15-6 中 灰色 部 分 完全 是 Crosswalk 提 供 的 新 部 分 ， 而 Content 和 
Blink 主 要 来 源 于 Chromium 开 源 项 目 ， 当 然 也 包括 一 些 不 同 的 地 方 ， 
如 性 能 优化 。 在 这 之 上 即 是 Crosswalk 中 的 RuntimeCore 层 和 Runtime 
层 。 RuntimeCore 层 使 用 Content 层 的 桥接 层 并 提供 简单 易 用 的 Java 接 
口 。 而 Runtime 层 则 包括 扩展 Web 接 口 的 扩展 机 制 、 各 种 web 运行 平台 
的 新 Web 接 口 《如 双 屏 幕 实现 的 支持 等 ) ， 也 包括 跟 Android 系 统 集成 
的 部 分 ， 如 对 话 框 、 文 件 选择 器 等 。 在 这 之 上 就 是 调用 Runtime 层 的 封 


装 层 ， 用 来 加 载 Web 应 用 ， 同 时 也 是 为 了 符合 Android 系 统 的 需要 ， 包 
括 Activity 和 Application 等 具体 实现 。 


根据 上 面 的 层次 结构 图 ，Crosswalk 大 致 有 以 下 特性 。 


为 使 用 了 最 新 的 Chromium 和 Blink 人 代码， 所 以 Crosswalk 对 于 
HTML5 功 能 的 支持 非常 好 ， 特 别 是 同 之 前 Android 系 统 上 提供 的 
基于 WebKit 的 Android 移 植 实现 的 WebView 对 比 。 
因为 不 依赖 于 操作 系统 的 泻 染 网 页 的 能 力 ， 所 以 Crosswalk 提 供 统 
一 的 接口 ， 而 不 是 在 不 同 平台 上 支持 不 同 的 接口 ， 这 样 在 最 大 程 
度 上 提供 了 统一 的 编程 接口 ， 当 然 不 是 所 有 接口 完全 一 致 。 
Crosswalk 中 加 入 了 一 些 特别 的 优化 代码 ， 使 得 它 的 性 能 比较 出 
色 ， 不 仅仅 是 跟 WebView 对 比 ， 而 且 跟 Chromium 比 较 ，Crosswalk 
在 某 些 地 方 也 表现 出 不 一 样 的 性 能 优势 。 
Crosswalk 设 计 并 实现 了 自己 的 扩展 系统 ， 在 Android 上 ， 是 一 套 
提供 Java 接 口 的 机 制 ， 虽 然 它 的 内 部 实现 直接 修改 了 Chromium 的 
代码 。 该 系统 能 够 允许 Web 开 发 者 在 需要 的 时 候 使 用 Java 或 者 
C++ 来 扩展 Web 的 能 力 。 

Crosswalk 实 现 了 众多 W3C 定 义 的 关于 Web 应 用 方面 的 规范 ， 如 平 
台 的 运行 模型 、 各 种 设备 接口 等 ， 极 大 地 提升 了 Web 运 行 环境 的 
能 力 ， 同 时 因为 遵守 规范 ， 对 移植 性 有 极 大 的 好 处 。 

Crosswalk 极 好 地 同 Android 系 统 结合 起 来 ， 小 到 应 用 名 称 、 图 
标 ， 大 到 应 用 程序 生命 周期 ， 各 种 协议 的 支持 ， 如 电话 、 用 户 界 
面 、 安 全 权限 等 ， 这 一 切 使 web 应 用 在 Android 系 统 之 上 能 够 获得 
跟 本 地 应 用 类 似 的 体验 。 

Crosswalk 引 入 了 对 很 多 新 功能 的 支持 ， 如 Miracast 的 支持 ， 它 能 
够 支持 多 屏 显 示 ， 对 很 多 应 用 提供 了 良好 的 体验 。 当 然 还 有 很 多 


其 他 的 功能 ， 读 者 可 以 慢 慢 挖掘 。 


对 于 Web 应 用 的 开发 者 来 说 ， 实 际 上 可 以 在 完全 不 了 解 这 些 背 后 
故事 的 同时 依然 使 用 Crosswalk， 你 所 要 做 的 仅 是 使 用 一 个 工具 ， 也 就 
是 Crosswalk 中 的 打包 工具 ， 该 工具 可 以 根据 Web 应 用 的 设置 来 自动 生 
成 APK 文 件 ， 开 发 者 可 以 将 该 文件 上 传 至 Google Play Store 就 可 以 了 ， 
十 分 方便 ， 具 体 的 步骤 可 以 参考 官网 上 的 文档 ， 有 比较 详细 的 描述 。 


15.6 Chromium OS 和 Chrome 的 
Web 应 用 


15.6.1 基本 原理 


HTML5 技 术 已 经 不 仅仅 用 来 编写 网 页 了 ， 也 可 以 用 来 实现 Web 应 
用 。 传 统 的 操作 系统 支持 本 地 应 用 ， 那 么 是 否 可 以 有 专门 的 操作 系统 
来 支持 Web 应 用 呢 ? 当然 ， 现 在 已 经 有 众多 基于 Web 的 操作 系统 ， 但 
它们 只 支持 基于 HTML5 的 Web 应 用 ， 而 不 支持 本 地 应 用 ， 这 的 确 是 一 
项 技术 革命 。Chromium OS 就 是 支持 Web 应 用 的 一 个 Web 操 作 系统 。 


Chromium OS 也 是 基于 Chromium 项 目 开发 出 来 的 ， 它 的 核心 思想 
是 使 用 泻 染 引擎 和 Chromium 浏 览 器 的 能 力 ， 同 时 加 上 对 Web 应 用 其 他 
方面 的 支持 ， 并 使 用 Linux 内 核 和 一 些 第 三 方 库 构 建成 一 个 操作 系统 。 
而 对 于 其 他 众多 的 操作 系统 功能 ， 如 果 不 需 要 ， 它 根本 不 会 被 包含 进 
来 ， 所 以 它 是 一 个 很 轻 量 级 的 操作 系统 ， 结 构 上 非常 简单 和 清晰 明 
了 ， 图 15-7 中 的 架构 图 就 是 来 源 于 Chromium 的 官方 网 站 ， 具 体 参 见 这 


个 网 HE : http:/www.chromium.org/chromium-os/chromiumos-design- 


docs/software-architectureo 未 来 可 能 有 些 变化 ， 如 图 形 方面 使 用 新 的 
Aura 架 构 等 ， 但 是 基本 的 架构 应 该 是 比较 稳定 的 。 


Window Manager 


os 


图 15-7 Chromium OS 系 统 架构 图 


图 15-7 中 最 下 面 的 部 分 当然 是 硬件 ， 在 它 之 上 是 为 该 系统 定义 的 
Firmware. Chromium OS 是 基于 Linux 内 核 和 Linux 上 一 些 系 统 库 开发 而 
来 的 ， 同 时 使 用 X 图 形 架 构 并 定制 了 自己 的 窗口 管理 系统 (Window 
Manager) 。 这 些 同 传统 的 Linux 区 别 不 是 很 大 ， 主 要 区 别 是 Chromium 
OS 做 了 比较 多 的 定制 和 裁剪 。 对 于 系统 层面 的 技术 ， 这 里 不 做 过 多 的 
前 述 。 


其 余部 分 就 是 Chromium OS 的 核心 功能 ， 主 要 基于 Chromium 项 
目 ， 它 能 支持 Web 应 用 、 网 页 和 Chromium 的 扩展 实例 。Chromium 的 扩 
展 机 制 在 第 10 章 中 做 过 介绍 ， 这 里 主要 介绍 Web 应 用 的 支持 。 


刚 开 始 ，Chromium 只 是 支持 扩展 (Extension) ， 在 Google 的 
Chrome Web Store 中 也 只 是 包括 了 各 种 开发 者 开发 的 扩展 ， 但 是 扩展 
只 是 浏览 器 的 补充 和 功能 的 延伸 。 在 目前 的 Chrome Web Store 中 ， 已 
经 有 应 用 和 扩展 等 不 同 的 类 别 。 不 过 应 用 是 基于 扩展 的 结构 发 展 起 来 
的 ， 那 么 到 底 对 于 应 用 方面 有 哪些 不 同 之 处 呢 ? 


Web 应 用 在 Chromium 中 称 为 Chrome Apps， 它 的 目标 是 提供 像 本 


地 应 用 一 样 的 能 力 ， 但 是 可 以 像 网 页 一 样 安全 ， 也 就 是 使 用 各 种 安全 
技术 来 加 强 安 全 性 。Chrome Apps 看 起 来 和 用 起 来 ， 感 觉 更 像 本 地 应 
用 。 每 一 个 应 用 使 用 单独 的 窗口 ， 像 本 地 应 用 一 样 被 打开 或 者 被 天 


闭 。 


外 观 上 看 起 来 像 本 地 应 用 只 是 一 方面 ， 更 重要 的 是 系统 能 够 提供 


什么 样 能 力 给 Chrome Apps。 在 Chromium 中 ， 主 要 是 通过 “chrome.*” 
编程 接口 来 将 本 地 系统 的 能 力 提 供给 Web 开 发 者 的 。 


首先 来 看 称 为 Manifest.json 的 清单 文件 ， 该 文件 类 似 于 Android 系 
统 应 用 程序 所 使 用 的 AndroidManfiest.xml， 它 定义 了 应 用 的 各 种 
设置 ， 如 图 标 、 名 称 、 入 口 文 件 、 语 言 、 权 限 等 信息 ， 也 就 是 一 
个 本 地 应 用 启动 时 候 的 设置 加 上 一 些 Web 应 用 的 特殊 设置 ， 一 个 
简单 的 Manifest.json 非 常 类 似 于 示例 代码 15-1 中 描述 的 那样 ， 只 是 
对 于 某 些 属性 的 定义 不 一 致 ， 但 是 例如 名 字 、 图 标 都 是 相同 的 含 
义 。 其 中 很 大 的 不 同 点 在 于 ，Chromium 的 清单 文件 引入 了 
“Background Page” 概 念 ， 这 表示 Web 应 用 可 以 从 一 个 JavaScript 文 
件 启动 ， 而 不 是 HTML 网 页 。 这 个 有 点 类 似 于 本 地 应 用 是 从 
“main” 兄 数 开 始 执 行 的 。Chromium 这 样 做 的 好 处 就 是 能 够 引入 应 
用 生命 周期 、 安 装卸 载 等 概念 。 

其 次 是 离线 技术 。Web 应 用 使 用 起 来 想 要 像 一 个 本 地 应 用 ， 那 就 
不 能 只 在 网 络 连 接 的 时 候 才 能 够 使 用 ，Chrome Apps 默 认 Web 应 用 
可 以 离线 使 用 。 

最 后 是 Chrome Apps 的 应 用 程序 生命 周期 (App Life Cycle) , X 
同 现在 移动 系统 上 的 概念 是 一 致 的 。 在 Chromium 中 ， 包 括 了 
“onLaunch”、“onSuspend”、“onSuspendCanceled” 等 ， 还 包括 安装 


A0 EN 2K 48 K BY MO “onInstalled”, “onUpdateAvailable’S, XW 
Chromium 为 应 用 特别 引入 的 编程 接口 。 


接 下 来 是 安全 机 制 。 在 第 12 章 介绍 了 安全 机 制 ， 包 括 CSP 和 CORS 
等 安全 技术 ， 在 Manifest.json 中 ， 也 同样 定义 了 这 些 信 息 ， 因 为 这 些 应 
用 不 一 定 从 网 络 上 传输 过 来 ， 所 以 这 些 设 置 不 能 定义 在 HITP 消 息 头 
中 ， 而 是 定义 在 Manifest.json 中 ， 所 以 同样 需要 将 安全 机 制 引 入 了 
Chrome Appso 


目前 Chromium OS 只 支持 传统 的 桌面 硬件 ， 但 是 ， 它 也 逐步 加 入 
触 控 等 移动 领域 的 技术 ， 发 展 也 很 迅速 ， 至 于 未 来 会 发 展 成 什么 样 ， 
笔者 将 会 和 大 家 一 起 关注 。 


15.6.2 ”其 他 Web 操 作 系 统 


下 面 选 取 目 前 一 些 主流 的 Web 操 作 系 统 来 做 一 些 简单 的 介绍 和 比 
较 ， 它 们 分 别 是 WebOS、Tizen、Chromium OS 及 Firefox OS. 


上 面 介绍 的 很 多 Web 操 作 系 统 都 是 基于 WebKit (或 者 Blink) BR 
引擎 开发 的 ， 如 WebOS、Tizen 和 Chromium OS。 只 有 Firefox OS 是 基 
于 自身 的 Gecko 引 擎 开发 的 。 接 下 来 的 内 容 主 要 是 从 架构 或 者 模块 方 
面 进 行 一 些 分 析 。 


WebOS 最 早 来 源 于 Palm， 后 来 到 惠普 ， 到 现在 被 LG 收购 ， 经 历 非 
常 复杂 。 图 15-8 是 来 自 于 WebOS 官 方 网 站 上 给 出 的 架构 图 ， 图 中 隐 去 
了 很 多 比较 细节 的 东西 ， 其 中 Core OS 主要 是 基于 Linux 内 核 和 WebKit 
泻 染 引擎 打造 的 系统 ， 二 者 提供 ，Web 应 用 运行 的 系统 环境 。 


Applications 
UI System 
M y Mojo Framework 
anager 


web0OS Services 


图 15-8 ”WebOS 官 方 架构 图 


在 这 之 上 的 左 侧 是 用 户 界 面 的 管理 ， 如 Web 应 用 切换 、 窗 口 等 ， 
这 同 传统 操作 系统 非常 类 似 。 它 的 右 侧 是 提供 的 各 种 服务 ， 这 些 服务 
的 接口 是 JavaScript 接 口 。 每 个 应 用 都 可 以 通过 JavaScript 和 系统 的 服务 
框架 来 调用 这 些 服务 ， 这 看 起 来 非常 像 Linux 系 统 的 Daemon 服 务 进程 
和 它 的 使 用 进程 。 在 服务 之 上 的 是 Mojo 框 架 ， 现 在 已 经 变 为 Enyo 和 
Enyo2， 它 们 主要 是 提供 应 用 开发 所 需要 的 应 用 框架 和 基础 库 。 在 最 
上 面 的 当然 是 Web 应 用 了 ， 有 了 上 面 提 到 的 这 些 库 和 界面 管理 器 ， 
Web 应 用 可 以 像 本 地 应 用 一 样 在 WebOS 中 运行 了 。 


接 下 来 是 Tizen 系 统 。Tizen 是 由 英特尔 和 三 星 联合 开源 社区 打造 的 
新 一 代 Web 操 作 系 统 ， 它 同样 也 是 基于 Linux 内 核 和 WebKit 〈 在 某 个 版 
本 之 后 基于 WebKit2) 引擎 开发 的 。 虽 然 支持 Web 应 用 ， 但 是 Tizen 目 
前 依然 支持 本 地 应 用 ， 也 就 是 使 用 C/C++ 语言 和 和 EFL 图形 库 开发 的 应 
用 。 图 15-9 是 来 自 Tizen 官 方 网 站 的 架构 图 ， 看 起 来 比较 琐碎 。 但 是 ， 
大 体 上 还 是 包含 几 个 部 分 ， 最 下 面 是 Linux 内 核 ， 内 核 之 上 是 各 种 基础 
库 和 框架 ， 它 们 当然 是 使 用 本 地 语言 开发 的 ， 该 架构 中 还 包含 了 窗口 
管理 系统 ， 也 就 是 图 中 的 “Core” 部 分 。 
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Video || Touch BT Call n 
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图 15-9 Tizen 系 统 官方 架构 图 


图 中 的 “Core” 部 分 之 上 分 成 两 块 ， 一 块 是 支持 Web 应 用 的 框架 
另外 一 块 是 支持 本 地 应 用 的 框架 。 右 侧 的 本 地 框架 同 很 多 本 地 系统 差 
别 不 大 ， 而 左 侧 的 框架 主要 是 为 支持 Web 应 用 而 存在 的 ， 包 括 了 各 种 
W3C/HTML5 定 义 的 功能 ， 同 时 也 包括 了 各 种 设备 接口 ， 如 蓝牙 等 ， 
这 些 都 会 以 JavaScript 接 口 的 方式 被 web 应 用 所 使 用 。 


Firefox OS 是 在 Firefox 浏 览 器 的 基础 上 发 展 起 来 的 ， 是 基于 Linux 
内 核 和 和 Gecko 泻 染 引擎 开发 出 来 的 。Firefox 结构 如 图 15-10 所 
示 ， 主 要 思想 来 自 于 Firefox 官 方 网 站 ， 这 里 笔者 进行 了 一 些 简化 以 方 
便 理 解 。 


Gaia (工具 、 各 种 认证 和 系统 应 用 ) 


Gecko 〈 泻 染 引擎 十 各 种 JavaScript 接口 实现 ) 


Gonk (基础 库 +Linux 内 核 ) 


图 15-10 Firefox OS 的 层次 架构 图 


图 中 可 以 看 出 从 模块 结构 上 Firefox OS 可 以 分 成 三 个 层 ， 最 下 层 的 
基础 层 称 为 Gonk 层 ， 它 包括 了 Linux 内 核 和 众多 的 基础 库 ， 这 个 基本 
上 所 有 操作 系统 都 是 一 样 的 。 在 Gonk 层 上 面 的 是 Gecko 层 ， 它 主要 是 
Gecko 泻 染 引 警 和 Web 应 用 所 需要 的 众多 JavaScript 接 口 的 具体 实现 。 
在 Gecko 层 上 面 的 是 Gaia 层 ， 它 包含 了 各 种 帮助 生成 Web 应 用 的 工具 ， 
以 及 基于 系统 的 应 用 (如 通信 录 、 电 话 应 用 等 ) 和 经 过 认证 的 其 他 应 
用 。 结 合 上 面 介绍 的 各 种 Web 操作 系统 来 看 ， 这 些 系 统 大 体 上 的 架构 
比较 类 似 ， 只 是 在 细节 或 者 某 些 模块 的 组 织 上 面 有 些 不 同 点 。 就 笔者 
看 来 ， 目 前 这 些 Web 操 作 系统 仍然 在 发 展 的 初期 阶段 ， 很 多 能 力 上 不 
足以 与 传统 的 操作 系统 媲美 ， 但 是 这 并 不 妨碍 它们 的 优势 ， 比 如 开发 
者 使 用 HTML5 技 术 来 开发 应 用 程序 。 随 着 HTML5 技 术 的 不 断 发 展 ， 
HTML5 在 能 力 和 性 能 上 的 差距 不 断 缩减 ，HTML5 所 带 来 的 巨大 优势 
会 逐步 成 为 Web 操 作 系 统 的 助 推力 。 笔 者 有 理由 相信 ，HTML5 技 术 和 
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